JavaScript.Node对象属性

╰+哭是因爲堅強的太久メ 2022-06-04 04:43 211阅读 0赞

#### **Node对象属性一** ####

**\*nodeName**  
**\*nodeType**  
**\*nodeValue**

\*使用dom解析html时候，需要html里面的**标签，属性和文本**都封装成对象

**\*标签节点对应的值**  
![这里写图片描述][SouthEast]

nodeType： 1  
nodeName： 大写标签名称 比如SPAN  
nodeValue: null

**\*属性节点对应的值**  
![这里写图片描述][SouthEast 1]

nodeType： 2  
nodeName： 属性名称  
nodeValue: 属性的值

**\*文本节点对应的值**  
![这里写图片描述][SouthEast 2]

nodeType： 3  
nodeName： \#text  
nodeValue: 文本内容

#### **Node对象的属性二** ####

<ul>  
<li>qqqqq</li>  
<li>wwww</li>  
</ul>

**\*父节点**  
\-ul是li的父节点  
\-parentNode  
\-//得到li1  
var li1 = document.getElementById(“li1”);  
//得到ul  
var ul1 = li1.parentNode;  
alert(ul1.id);

**\*子节点**  
\-li是ul的子节点  
\-childNodes：得到所有子节点，但是兼容性很差

\-**firstChild**：获取第一个子节点  
\-//获取ul的第一个子节点 id=li1  
//得到ul  
var ul1 = document.getElementById(“ulid”);  
//第一个子节点  
var li1 = ul1.firstChild;  
alert(li1.id);

\-**lastChild**：获取最后一个子节点  
//得到最后一个子节点  
var li4 = ul1.lastChild;  
alert(li4.id);

**\*同辈节点**  
\- li之间的关系是同辈节点  
\- **nextSibling**: 返回一个给定节点的下一个兄弟节点。  
**previousSibling**：返回一个给定节点的上一个兄弟节点。

\-//获取li的id是li3的上一个和下一个兄弟节点  
var li3 = document.getElementById(“li3”);  
//alert(li3.nextSibling.id);  
alert(li3.previousSibling.id);

[SouthEast]: /images/20220604/3f554921c6d34a0cb615217bef594f0b.png
[SouthEast 1]: /images/20220604/d8226fe28986478080e7140536be88e9.png
[SouthEast 2]: /images/20220604/5031bbad6a2042cb803477f6d463406b.png