详谈DOM简介及节点、属性、查找节点的方法


Posted in Javascript onNovember 16, 2017

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简介及节点、属性、查找节点的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
js编写简单的计时器功能
Jul 15 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue实现简单跑马灯效果
May 25 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
图片加载完成再执行事件的实例
Nov 16 #Javascript
详解React 在服务端渲染的实现
Nov 16 #Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 #Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 #Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 #Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 #Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 #Javascript
You might like
php验证是否是md5编码的简单代码
2014/04/01 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python批量更改文件名的实现方法
2017/10/29 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
python -v 报错问题的解决方法
2020/09/15 Python
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
经济与贸易专业应届生求职信
2013/11/19 职场文书
培训主管的岗位职责
2013/11/23 职场文书
好的演讲稿开场白
2013/12/30 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
家长学校实施方案
2014/03/15 职场文书
总经理任命书范本
2014/06/05 职场文书
岗位说明书标准范本
2014/07/30 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
老龙头导游词
2015/02/11 职场文书
给校长的建议书范文
2015/09/14 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis