2.元素节点与属性节点
-
1.元素节点
-
类型 nodeTypoe:1
-
名称 nodeName:标签名大写
-
值 nodeValue : null
-
2.属性节点
-
类型 nodeTypoe:2
-
名称 nodeName:属性名
-
值 nodeValue : 属性值
3.文本节点与注释节点与文档节点
-
1.文本节点
-
类型 nodeTypoe:3
-
名称 nodeName:#text
-
值 nodeValue : 文本内容
-
2.注释节点
-
类型 nodeTypoe:8
-
名称 nodeName:#comment
-
值 nodeValue : 注释内容
-
3.文档节点
-
类型 nodeTypoe:9
-
名称 nodeName:#document
-
值 nodeValue : null
4.获取子节点与子元素
-
childNodes:获取子节点:(文本节点,注释节点,子元素节点)
-
细节:属性节点通过attribute来获取,一般用的不多
-
浏览器兼容问题:IE8及之前不包含非空文本
-
children:获取子元素:(元素节点)
-
浏览器兼容问题: IE8及之前包含注释节点
5.兄弟节点与兄弟元素
nextSibling:获取下一个节点 previousSibling:获取上一个节点
-
IE8及之前:文本(不包含非空)、注释、元素
-
其他浏览器:文本(包含非空)、注释、元素
6.第一个子节点与第一个子元素
-
1.firstChild : 第一个子节点
-
2.firstElementChild:第一个子元素节点
-
他们两者的浏览器兼容问题与兄弟节点一致
7.最后一个节点与最后一个元素
-
1.lastChild : 最后一个子节点
-
2.lastElementChild:最后一个子元素节点
-
他们两者的浏览器兼容问题与兄弟节点一致
8.获取父节点
parentNode:获取元素的父元素节点
- 细节:一个元素的父节点一定是一个元素,而不是(文本、注释、属性),只有元素才有子节点
9.小案例(点击关闭二维码 )
- 需求:点击二维码图片右上角的小叉叉,关闭二维码
案例图片 :
效果图:
完整代码: