获取页面节点方法

直接获取节点

1.document.getElementById('元素的ID')

2.document.getElementsByTagName('元素的标签名') 

3.document.getElementsByName(‘元素的name属性’)

4.document.getElementsByClassName("元素的类名")

5.document.querySelector("选择器")

6.document.querySelectorAll("选择器")

注：后两个是ES6新增

获取子节点

1.document.getElementById("test").childNodes

返回数组，换行和空格也属于节点信息，需要另外用算法将其排除在外

2.document.getElementById("test").children[0]

返回数组，不带空格和换行，可以通过索引获取元素

3.document.getElementById("test").firstChild

返回第一个子元素，考虑空格和换行

4.document.getElementById("test").firstElementChild

返回第一个子元素，不考虑空格和换行

5.document.getElementById("test").lastChild

返回第一个子元素，考虑空格和换行

6.document.getElementById("test").lastElementChild

返回第一个子元素，不考虑空格和换行

获取父节点

1.document.getElementById("test").parentNode

获取直接父元素，w3c标准

2.document.getElementById("test").parentElement

获取直接父元素，ie标准

3.document.getElementById("test").offsetParent

获取所有父元素

获取兄弟节点

1.document.getElementById("test").parentNode.children[1]

先获取父节点，再获取子节点

2.document.getElementById("test").previousSibling

获取前一个兄弟节点，考虑空格和换行

3.document.getElementById("test").previousElementSibling

获取前一个兄弟节点，不考虑空格和换行

4.document.getElementById("test").nextSibling

获取后一个兄弟节点，考虑空格和换行

5.document.getElementById("test").nextElementSibling

获取后一个兄弟节点，不考虑空格和换行

节点创建

1.document.createElement

创建元素节点

节点添加

1.parentNode.appendChild(子节点)

把子节点插入到父节点的最后面

2.parentNode.insertBefore(A,B)

把节点A添加到节点B之前

节点删除

parentNode.removeChild(子节点)

节点改变

parentNode.replaceChild(A,B)

用节点A替换节点B

节点内容

1.innerText

可以设置节点的文本内容、也可以读取节点的内容、不可以解析标签

2.innerHTML

可以设置节点的文本内容、也可以读取节点的内容、可以解析标签

节点属性

1.setAttribute(属性节点名,属性节点值)

设置指定的属性节点

2.getAttribute(属性节点名)

获取指定属性节点名称的值

3.removeAttribute(属性节点名)

删除指定属性节点