DOM的示例分析

这篇文章将为大家详细讲解有关DOM的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

DOM(Document Object Modle) 操作文档的编程接口

DOM定义了表示和修改文档的方法，不能修改css样式表，在js中使用DOM方法改变元素的css样式，实质上是在元素上添加行间样式。

DOM对象就是宿主对象，用来操作HTML和xml功能对象的集合。 xml——>xhtml——>html4.0——>html5

HTML和xml的区别：除了xml可以自定义标签外基本上没区别，xml被json替代了。

document，单独写的时候，它代表整个文档，隐式的写在html标签的上一层，html只是文档中的根标签。

注意点：BOM、DOM成组的东西都是类数组，而不是数组。

获取元素的方法：

getElementById();

在IE8以下的浏览器不区分id值得大小写，并且匹配元素的name的属性值。由于后台会修改id值，所以尽量不用或少用id。

getElementsByTagName();标签名，所有浏览器都支持

getElementsByClassName(); IE8及其以下得浏览器不支持

getElementsByName(); 在旧版本中，只有能提交请求的标签的name才生效(form、表单元素、img、iframe)

document.querySelector(); css选择器，IE7及以下不兼容，并且不具有实时性。

document.querySelectAll();

节点类型：

元素节点 1

属性节点 2

文本(text)节点 3 // 文本、空格、回车等都是文本节点

注释(comment)节点 8

document节点 9

documentfragment 11

遍历节点数：

parentNode 子节点的父节点，最终的parentNode节点是document节点。

childNodes 父节点的所有子节点，元素节点、注释节点、文本节点

firstChild 第一个子节点

lastChild 最后一个子节点

nextSibling 下一个兄弟节点

previousSibling 前一个兄弟节点

遍历元素节点数：（除了children节点，其他的都是IE9及以下不兼容）

parentElement 元素的父元素节点，最终的父元素节点是html元素，document是自成节点。

children 父元素下的元素子节点。

node.childElementCount === node.children.length 当前子节点的元素子节点个数。用children.length。

firstElementChild 第一个元素子节点

lastElementChild 最后一个元素子节点

nextElementSibling、previousElemnetSibling

节点的四个属性：

nodeName 除了元素节点，返回的结果前面都有一个‘#'，而元素节点返回大写形式的标签名，类型都为只读。

nodeValue 只用于文本节点和注释节点,可读写。

nodeType 返回数字，该数字代表对应的节点类型。只读

attributes 元素节点的属性集合。

node.hasChildNodes()方法，判断父节点里面是否有子节点，返回结果为布尔值。

关于“DOM的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。