JS节点的属性及方法

前言

学习了jquery等类库，可不能”忘本“，原生js才是它的根基。
”但是前端技术发展到今天，如果你时常关注Github上一些流行的开源JS项目，你会发现这样一种趋势：开发者们越来越倾向于使用原生代码，而不依赖与第三方库。“

---

一、属性

Attributes   存储节点的属性列表（只读）

childNodes   存储节点的子节点列表（只读）

dataType     返回次节点的数据类型

documentElement  返回文档的根元素（可读写）

firstChild   返回当前节点的第一个子节点（只读）

lastChild    返回当前节点最后一个子节点（只读）

nextSibling  返回当前节点的下一个兄弟节点（只读）

nodeName     返回节点的名字（只读）

nodeType     返回节点的类型（只读）（9代表Document节点、1代表Element节点、3代表Text节点、8代表Comment节点、11代表DocumentFragment节点）

nodeValue    返回节点的文本（可读写）

ownerDocument 返回包含此节点的根文档（只读）

parentNode   返回父节点（只读）

previousSibling  返回此节点的前一个兄弟节点（只读）

Text         返回此节点及其后代的文本内容

firstElementChild 返回第一个Element节点

lastElementChild  返回最后一个Element节点

nextElementSibling  返回下一个兄弟Element节点

previousElementSibling 返回上一个兄弟Element节点

childElementCount  子元素的数量

二、方法

appendChild   为当前节点添加一个新的子节点，放在最后的子节点

cloneNode     返回当前节点的拷贝

createAttribute  创建新的属性

createComment 创建一个注释节点

createDocumentFragment  创建DocumentFragment对象

createElement 创建一个元素节点

createNode    创建给定类型，名字和命名空间的节点

createTextNode  创建包含给定数据的文本节点

getElementsByTagName  返回指定名字的元素集合

getElementById  返回指定ID的元素节点

getElementsByName  返回给定name属性的元素集合

hasChildNodes  返回当前节点是否又子节点

insertBefore  在指定节点前插入子节点

removeChild   从子节点列表中删除指定的子节点

replaceChild  从子节点列表中替换指定的子节点

save          把XML文件存到指定节点

selectNodes   对节点进行指定的匹配，并返回第一个匹配的节点

selectSingleNode  对节点进行指定的匹配，并返回第一个匹配节点



insertAdjacentHTML  

三、节点引用

3.1 绝对引用

document.documentElement   返回文档的根节点

document.activeElement     返回当前文档中被激活的标签节点

event.fromElement          返回鼠标移出的源节点

event.toElement            返回鼠标移入的源节点

event.srcElement           返回激活事件的源节点



document.forms  返回form元素

3.2 相对引用（node为当前节点）

返回父节点

node.parentNode

node.parentElement

返回子节点集合（包括文本节点以及标签节点）

node.childNodes

返回子标签节点集合

node.children

返回第一个子节点

node.firstChild

返回下一个兄弟节点

node.nextSibling

返回上一个兄弟节点

node.previousSibling

3.3节点操作

创建新节点

document.createElement(newNode)

添加子节点

node.appendChild(newNode)

插入节点

node.insertBefore(parentNode)

删除节点

node.remove()

node.removeChild()

node.removeNode()

替换节点

node.replaceChild()

node.replaceNode()

node.swapNode()

复制节点

node.cloneNode(boolean)  boolean:true/false 是否克隆该节点所有子节点



node.contains(oNode)  是否包含某节点

node.hasChildNodes()  是否有子节点

四、其他

getAttribute 获取属性  

setAttribute 设置属性

hasAttribute 检测命名属性是否存在  

removeAttribute 删除属性