js获取元素节点

一：获取元素节点(document对象下)

1. id获取

　　documnet.getElementById("id")

　　获取该id节点元素

2. class类名获取

　　document.getElementsByClassName("className")

　　获取的是一个元素集合可以通过索引获取对应的某个元素

3. 元素获取

　　document.getElementsByTagName("div")

　　获取的是一个元素集合，可以通过索引获取某个元素

4. 通过name属性

　　document.getElementsByName("name")

　　获取的是一个节点集合，通过索引获取对应元素

5.  通过form元素

　　document.forms

　　获取的是一个元素集合。

6. H5新增的获取法

　　document.querySelector()

　　获取单个元素节点

　　document。querySelectorAll()

　　获取的是一个节点集合，通过索引获取对应元素

二：创造节点

1. 创建元素节点

　　document.createElement("div")

2. 创建文本节点

　　document.createTextNode

3. 通过克隆创建节点

　　document.cloneNode(true)

　　注：有两个参数“true”和“false”；

　　　　可选。默认是 false。

　　　　设置为 true，如果您需要克隆节点及其属性，以及后代

　　　　设置为 false，如果您只需要克隆节点及其后代

三：修改节点

var parent = document.getElementById("id")

var child = document.createElement("span")

1. 添加节点appendchild

　　parent.appentChild(child) 在父元素结尾出添加

2. 移除节点removeChild

　　parent.removeChild(child)

3.替换节点replace

　　parent.replace(newNode,oldNode)

4.某节点前面插入节点insertBefore

　　parent.insertBefore(child) 在parent元素前面添加（是同级关系）

四：jQuery中的一些节点方法

1. append(),在父级最后追加一个子元素         parent.appent(child)

2. appendTo(),将子元素追加到父级的最后     child.appent(parent)

3. prepend(),在父级最前面追加一个子元素  

4. prependTo(),将子元素追加到父级的最前面  

5. after(),在当前元素之后追加（是同级关系）

6. before(),在当前元素之前追加（是同级关系）

7. insertAfter(),将元素追加到指定对象的后面（是同级关系）

8. insertBefore(),将元素追加到指定对象的前面（是同级关系）

五：节点关系

1. 父关系

　　parentNode 父节点

　　parentElement 父元素

2. 子关系

　　children  子元素

　　childNodes  子节点

　　firstElementChild   第一个子元素

　　firstChild   第一个子节点

　　lastElementChild   最后一个子元素

　　lastchild   最后一个子节点

3. 兄弟关系

　　previousSibling   节点的上一个兄弟节点

　　previousElementSibling   节点的上一个兄弟元素

　　nextSibling   节点的下一个兄弟节点

　　nextElementSibling   节点的下一个兄弟元素

4. jQuery中的一些关系

　　再议

 

参考：http://blog.csdn.net/dl2295630178/article/details/70231056

转载于:https://www.cnblogs.com/renshijie/p/8040721.html