js总结——JavaScript之DOM（一）

JavaScript之DOM部分总结（一）

一、什么是DOM

文档对象模型（document object model ，是W3C制订的一套技术规范，用来描述JavaScript脚本怎样与HTML或XML文档进行交互的web标准。DOM规定了一系列标准接口，允许开发人员通过标准方式访问文档结构、操作网页内容、控制样式和行为等。

二、document代表整个文档，我们可以通过document的一些方法获取节点

1.document.getElementById(“id”);

• 该方法通过ID名查找HTML元素（节点），如果未找到返回null；
• 该方法是静态获取元素的方法；

2.document.getElementsByTagName(“div”);

• 该方法获取带有指定标签名的对象的集合。
• 返回元素的顺序是它们在文档中的顺序。
• 该方法是动态获取元素的方法；

3.document.getElementsByName(“username”);

• 该方法可返回带有指定名称的对象的集合。(常用于表单)
• 该方法是动态获取元素的方法；
• IE不支持

4.document.getElementsByClassName(“btn”);

• 该方法返回文档中所有指定类名的元素集合
• 该方法是动态获取元素的方法；
• IE9以下不支持;

5.document.querySelector("#id/.classname");

• 该方法返回文档中匹配指定 CSS 选择器的一个元素。
• 该方法是静态获取元素的方法；
• IE7及以下不支持

6.document.querySelectorAll("#id/.classname");

• 该方法返回文档中匹配指定 CSS 选择器的所有元素
• 该方法是静态获取元素的方法；
• IE7及以下不支持

三、节点树（包含看不见的空格文本，还有注释等内容）；

1.elem.parentNode：找到elem的父节点

2.elem.childNodes

• 找elem的所有的直接子节点
• 包含看不见的空格文本，还有注释等内容

3.elem.firstChild:找到elem的第一个子节点(IE9以下获取的是元素节点)

4.elem.lastChild:找到elem的最后一个子节点(IE9以下获取的是元素节点)

5.elem.nextSibling:找到elem的下个兄弟节点(IE9以下获取的是元素节点)

6.previousSibling:找到elem的上个兄弟节点(IE9以下获取的是元素节点)

四、元素节点树（仅仅包含元素节点的树结构）

IE9以下不兼容

1.elem.parentElement:获取父节点元素

2.elem.children:获取子节点元素的集合

3.elem.firstElementChild:获取第一个子元素节点

4.elem.lastElementChild:获取最后一个子元素节点

5.elem.nextElementSibling:获取下个兄弟元素节点

6.elem.previousElementSibling:获取上个兄弟元素节点

五、创建节点

1.document.createElement():创建元素节点

2.document.createTextNode():创建文本节点

3.document.Comment():创建注释节点

4.document.createAttribute():创建属性节点

5.document.createDocumentFragment():创建文本碎片节点

六、插入节点

1.elem.appentChild():在elem内插入子节点

2.elem.insertBefore(a,b):插入a在b之前

七、删除节点

1.elem.remove():elem节点自己删除自己

2.elem.removeChild():从子节点列表中删除某个节点。

八、复制节点

1.cloneNode(true/false)

• true 复制并返回调用它的节点的副本,它还将递归复制当前节点的所有子孙节点。
• false 复制当前节点。

九、替换节点

1.elem.replaceChild(a,b) : a替换b

十、元素的属性操作

1.elem.getAttribute(name):返回指定属性名的属性值

2.elem.setAttribute(name,value):设置指定属性名的属性值

3.elem.removeAttribute(name):删除指定属性名的属性

以上为个人学习总结。如有不妥之处请大佬指出。