JavaScript基础 DOM对象

js的三大核心

1、ECMAScript js的语法标准
2、DOM Document Object Mobel 文档对象模型
提供方法:让js可以操作HTML标签方法 DOM老大是document
3、BOM Browser Object Mobel 浏览器对象模型
提供方法 让js可以操作浏览器 BOM 老大是window
js里最大的boss是window
document是window下的一个对象

DOM
Document Object Mobel 文档对象模型
一套规则,使JS能够 操作HTML 文档的规则

JS   通过   DOM规则   操作THML 文档

DOM树


JavaScript基础 DOM对象_第1张图片
DOM树

childNodes:获取所有的孩子节点

明天您好

我是a标签 阿飞
JavaScript基础 DOM对象_第2张图片
结果

JavaScript基础 DOM对象_第3张图片
image.png

1、是一个回车算是的一个文本节点 #text
2、p标签节点
3、是一个回车算是的一个文本节点 #text
4、 a标签节点
5、 3、是一个文本节点 #text
查看浏览器


JavaScript基础 DOM对象_第4张图片
image.png

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值,12种类型分别对应1到12的常数值

JavaScript基础 DOM对象_第5张图片
image.png
 
JavaScript基础 DOM对象_第6张图片
image.png

children只获取儿子节点中的所有标签元素节点

    
JavaScript基础 DOM对象_第7张图片
image.png
    
image.png

children只获取儿子级,如果要获取所有后代可以用


JavaScript基础 DOM对象_第8张图片
image.png

firstChild 获取第一个子节点 obj.firstChild;
主流浏览器:获取第一个子节点
IE 6 7 8 :获取第一个标签元素子节点

明天您好 您好您好

我是a标签 阿飞
JavaScript基础 DOM对象_第9张图片
这个节点

JavaScript基础 DOM对象_第10张图片
image.png

firstElementChild 获取第一个标签元素子节点 obj.firstElementChild;
主流浏览器:获取第一个标签元素子节点
IE 6 7 8 :undefined 没有这个属性

明天您好 您好您好

我是a标签 阿飞
JavaScript基础 DOM对象_第11张图片
image.png

总结:firstElementChild 在IE 6 7 8 不存在 firstChild 在IE 6 7 8 跟主流浏览器表现不一样
做兼容 用children[ 0 ];

lastChild 和lastElementChild 跟上面一样

nextSibling相邻的兄弟节点(下一个)


    

明天您好 您好您好

我是a标签 阿飞
JavaScript基础 DOM对象_第12张图片
image.png

JavaScript基础 DOM对象_第13张图片
image.png

nextElementSibling; 相邻的兄弟元素标签节点(下一个)


    

明天您好 您好您好

我是a标签 阿飞

这2个兼容性跟上面的一样 可以用序号来做选择下一个

previousSibling 上一个元素
previousElementSibling上一个标签元素

你可能感兴趣的:(JavaScript基础 DOM对象)