从零开始学 Web之DOM(四)节点

Daotin的梦呓

从零基础学 Web 前端

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「Daotin的梦呓」公众号,同时也会同步到我的相关博客,可以从

关于我

找到我的博客地址,也欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、节点

1、节点的概念

页面中的所有内容,包括标签,属性,文本(文字,空格,回车,换行等),也就是说页面的所有内容都可以叫做节点。

2、节点相关的属性

2.1、节点分类

标签节点:比如 div 标签,p 标签等。

属性节点:比如 class,value 等。

文本节点:比如闭合标签中的文本内容。

2.2、节点属性

nodeType:节点的类型,它的值有 1,2,3 三种。

标签节点:值为 1

属性节点:值为 2

文本节点:值为 3

nodeName:节点的名字

标签节点:大写的标签名字

属性节点:小写的属性名字

文本节点:#text

nodeValue:节点的值

标签节点:null

属性节点:属性的值

文本节点:文本内容

3、获取相关节点

3.1、获取父节点和父元素

父节点只能是标签,不能是属性节点和文本节点,所以父节点也是父元素。

parentNode:获取元素的父节点。

parentElement:获取元素的父元素。

3.2、获取子节点和子元素

childNodes:获取所有子节点(包括标签,属性,节点)

children:获取所有子元素(仅包括标签)

3.3、通过属性的名字获取属性节点

getAttributeNode:可以获取属性节点。

3.4、获取节点和元素的12行代码

1、以上前四个,chrome, firefox, IE8 都支持

2、后面八个,chrome,firefox支持,IE8下,所有获取节点的操作都获取的是元素,所有获取元素的操作都是 undefined。

3.5、总结

获取父子节点和元素的操作,chrome, firefox, IE8 都支持;

获取特殊子节点或者子元素和兄弟节点和元素操作,IE8 中所有的节点操作都是元素操作,所有的元素操作都是 undefined。

4、通过节点操作元素

通过节点操作元素的背景颜色

通过节点属性来区分节点和元素。

5、封装节点兼容代码

主要是兼容chrome 和 IE8 之间的差异,其次以获取任意一个父元素的第一个子元素为例,之所以不在 else 里面直接使用 主要考虑到标签之间可能有多个文本节点的影响。

欢迎关注

Daotin的梦呓

如果觉得不错,欢迎分享给其他的小伙伴们 :)

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180620G19B7H00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券