JavaScript-DOM—节点操作(一)

一、节点

核心节点:DOM

HTML-DOM

CSS-DOM

DOM Core


二、节点属性:

1、parentNode    

返回节点的父节点

例如:h1的父节点是div



2、childNodes    

返回子节点集合,childNodes[i]  包换行的括空格和注释


3、firstChild    

返回节点的第一个子节点,遍历的用法是访问该元素的文本节点

例如: text 为文本节点


4、lastChild    

返回节点的最后一个子节点

在IE8以上的浏览器是包括文本节点(换行空格)但是在IE8以及以下浏览器是不包括文本节点(换行空格)的


5、nextSibling    

下一个节点   

.nextSibling.nextSibling 表示下一个的下一个  只能选取平级的节点 否则为null


6、previousSibling    

上一个节点   

.previousSibling.previousSibling 表示上一个的上一个  只能选取平级节点null


三、Element属性

不包括文本节点只算元素

firstElementChild    返回节点的第一个子节点

lastElementChild    返回节点的最后一个子节点

nextElementSibling    下一个节点

previousElementSibling    上一个节点


四、如何去兼容谷歌和IE8以及以下的浏览器呢?

1、在谷歌浏览器浏览器 使用firstChild   lastChild  nextSibling   previousSibling  都是包括文本节点的    

而IE8以及以下浏览器是不包括文本节点(换行空格)的

2、IE浏览器不支持变量let  用var

3、IE8会把注释当做元素节点 会被选中 IE5和IE7不会

因为IE8不支持nextElementSibling previousElementSibling等写法 所以后面的写法就是为了兼容IE8

var 定义变量 = 元素.nextElementSibling || 元素.nextSibling   

var 定义变量  = 元素.previousElementSibling || 元素.previousSibling  

var 定义变量  = 元素.firstElementChild  ||  元素.firstChild   

var 定义变量 =元素.lastElementChild || 元素.lastChild 

例如:


五、节点详细信息

nodeName:节点名称    #text(文本节点包括换行和空格)   大写的元素   comment注释

nodeValue:节点值      "/n   "        "LI"        "我是注释"

nodeType:节点类型    3    1     8


节点类型    NodeType值

元素element    1

文本text     3

注释comments     8

文档document     9

查看方式:NodeType




设置属性

setAttribute()方法 添加设置本来就有的属性/自定义属性并为其赋指定的值 两个参数("指定属性名","添加的属性值")

removeAttribute() 方法删除指定的属性  一个参数("需要删除的属性名")

例如:


☆小拓展:不要使用for-in去遍历元素集合 要用for循环

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容