详谈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 事件小结 表格区别
Aug 13 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
js实现分割上传大文件
Mar 09 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
社区(php&&mysql)五
2006/10/09 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
使用JS动态显示文本
2017/09/09 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python内置函数dir详解
2015/04/14 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python 内置模块详解
2019/01/01 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
首都博物馆观后感
2015/06/05 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android