betway必威-betway必威官方网站
做最好的网站

详谈DOM简要介绍及节点,查找节点的办法

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

DOM(Document Object Modle) 操作文档的编程接口
DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式。
DOM对象就是宿主对象,用来操作HTML和xml功能对象的集合。 xml——>xhtml——>html4.0——>html5
HTML和xml的区别:除了xml可以自定义标签外基本上没区别,xml被json替代了。

DOM(Document Object Modle) 操作文档的编程接口
DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式。
DOM对象就是宿主对象,用来操作HTML和xml功能对象的集合。 xml——>xhtml——>html4.0——>html5
HTML和xml的区别:除了xml可以自定义标签外基本上没区别,xml被json替代了。

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

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

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

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

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

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

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

 

 

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

获取元素的方法:
getElementById();

必威官方网站,获取元素的方法:
getElementById();

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

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

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

获取元素的方法:

getElementsByTagName();标签名,所有浏览器都支持
getElementsByClassName(); IE8及其以下得浏览器不支持

getElementsByTagName();标签名,所有浏览器都支持
getElementsByClassName(); IE8及其以下得浏览器不支持

getElementById();

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

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

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

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

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

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

节点类型:
元素节点 1
属性节点 2
文本(text)节点 3 // 文本、空格、回车等都是文本节点
注释(comment)节点 8
document节点 9
documentfragment 11

节点类型:
元素节点 1
属性节点 2
文本(text)节点 3 // 文本、空格、回车等都是文本节点
注释(comment)节点 8
document节点 9
documentfragment 11

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

遍历节点数:
parentNode 子节点的父节点,最终的parentNode节点是document节点。
childNodes 父节点的所有子节点,元素节点、注释节点、文本节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling 前一个兄弟节点

遍历节点数:
parentNode 子节点的父节点,最终的parentNode节点是document节点。
childNodes 父节点的所有子节点,元素节点、注释节点、文本节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling 前一个兄弟节点

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

遍历元素节点数:(除了children节点,其他的都是IE9及以下不兼容)
parentElement 元素的父元素节点,最终的父元素节点是html元素,document是自成节点。
children 父元素下的元素子节点。
node.childElementCount === node.children.length 当前子节点的元素子节点个数。用children.length。
firstElementChild 第一个元素子节点
lastElementChild 最后一个元素子节点

遍历元素节点数:(除了children节点,其他的都是IE9及以下不兼容)
parentElement 元素的父元素节点,最终的父元素节点是html元素,document是自成节点。
children 父元素下的元素子节点。
node.childElementCount === node.children.length 当前子节点的元素子节点个数。用children.length。
firstElementChild 第一个元素子节点
lastElementChild 最后一个元素子节点

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

nextElementSibling、previousElemnetSibling

nextElementSibling、previousElemnetSibling

document.querySelectAll();

 

 

节点类型:

节点的四个属性:
nodeName 除了元素节点,返回的结果前面都有一个‘#’,而元素节点返回大写形式的标签名,类型都为只读。
nodeValue 只用于文本节点和注释节点,可读写。
nodeType 返回数字,该数字代表对应的节点类型。只读
attributes 元素节点的属性集合。

节点的四个属性:
nodeName 除了元素节点,返回的结果前面都有一个‘#’,而元素节点返回大写形式的标签名,类型都为只读。
nodeValue 只用于文本节点和注释节点,可读写。
nodeType 返回数字,该数字代表对应的节点类型。只读
attributes 元素节点的属性集合。

本文由betway必威发布于网页设计,转载请注明出处:详谈DOM简要介绍及节点,查找节点的办法

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。