DOM常用属性和方法汇总

今天看一个同事写的一段JS代码，完全使用原生的Dom方法，想想自己好久没有使用原生的方法了，一直在框架中游走，不由得复习一下常用的DOM属性与方法，同时记录下来，以便今后查阅。

DOM常用方法

/*
    @function createElement 按照给定的标签名创建一个新的元素节点
    @param element string 将被创建的元素名字
    @return interface 指向新建元素节点的引用
*/
reference = document.createElement(element)

/*
    @function createTextNode 按照给定的文本创建一个新的文本节点
    @param text string 新建文本节点所包含的文本字符串
    @return interface 指向新建文本节点的引用
*/
reference = document.createTextNode(text)

/*
    @function cloneNode 复制节点
    @param deep boolean 是否要把被复制节点的子节点一同复制到新建节点里去
    @return interface 指向新建克隆节点的引用
*/
reference = node.cloneNode(deep)

/*
    @function appendChild 给元素节点追加一个新的子节点或者文档中现有元素
    @param child object 新的节点或者现有元素节点
    @return interface 指向新增子节点的引用
*/
reference = element.appendChild(child)

/*
    @function insertBefore 把一个给定节点插入到一个给定元素节点的给定子节点的前面
    @param newNode object 将插入的新节点
    @param targetNode object 给定子节点
    @return interface 指向新增子节点的引用
*/
reference = element.insertBefore(newNode, targetNode)

/*
    @function removeChild 从一个给定元素里删除一个子节点
    @param node object 将要删除的子节点
    @return interface 指向已被删除的子节点的引用
*/
reference = element.removeChild(node)

/*
    @function replaceChild 把一个给定元素里的一个子节点替换为另外一个节点
    @param newChild object 新的子节点
    @param oldChild object 旧的子节点
    @return interface 指向旧的子节点的引用
*/
reference = element.replaceChild(newChild, oldChild)

/*
    @function setAttribute 为给定元素节点添加一个新的属性值或是改变它的现有属性的值
    @param attributeName string 属性名称
    @param attributeValue string 属性值
*/
element.setAttribute(attributeName, attributeValue)

/*
    @function getAttribute 得到给定元素节点的属性的值
    @param attributeName string 属性名称
    @return attributeValue string 属性值
*/
attributeValue = element.getAttribute(attributeName)

/*
    @function getElementById 得到一个给定ID属性值的元素
    @param id string 给定ID属性值
    @return element object
*/
element = document.getElementById(id)

/*
    @function getElementsByTagName 查找给定标签名的所有元素
    @param tagName string 给定标签名
    @return elements 节点集合
*/
elements = element.getElementById(id)

/*
    @function hasChildNodes 检查一个给定元素是否有子节点
    @return booleanValue boolean
*/
booleanValue = element.hasChildNodes()

DOM常用属性

• nodeName 返回一个字符串，其内容是给定节点的名字。
• nodeType 返回一个整数，代表着给定节点的类型。
• childNodes 返回一个数组，由给定节点的子节点构成。
• firstChild 返回一个给定元素节点的第一个子节点。
• lastChild 返回一个给定元素节点的最后一个子节点。
• nextSibling 返回一个给定节点的下一个子节点。
• parentNode 返回一个给定节点的父节点。
• previousSibling 返回一个给定节点的下一个子节点。