0

0

详细介绍DOM及节点、属性、查找节点的方法

亚连

亚连

发布时间:2018-05-18 18:10:46

|

2258人浏览过

|

来源于php中文网

原创

下面是我为大家分享一篇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 父节点的所有子节点,元素节点、注释节点、文本节点

Synthesys
Synthesys

Synthesys是一家领先的AI虚拟媒体平台,用户只需点击几下鼠标就可以制作专业的AI画外音和AI视频

下载

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()方法,判断父节点里面是否有子节点,返回结果为布尔值。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

js实现前后台相互传递Json代码

$http服务Post方法传递json参数案例详解

JS新手使用频繁出错点有哪些

相关专题

更多
C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

29

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

13

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

8

2026.01.22

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

55

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
麻省理工大佬Python课程
麻省理工大佬Python课程

共34课时 | 5.2万人学习

Go语言实战之 GraphQL
Go语言实战之 GraphQL

共10课时 | 0.8万人学习

MySQL 初学入门(mosh老师)
MySQL 初学入门(mosh老师)

共3课时 | 0.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号