鸩羽千夜

11node.md

goer ... 2022-01-05 Javascript
  • Javascript
 大约 2 分钟
节点关系

[toc]

# 节点关系

先前获取节点是说过

# 1. 节点

html元素

<a href=":///baidu.com">百度一下</a>

  1. 元素节点 标签名 a
  2. 文本节点 元素内 容 百度一下
  3. 属性节点 元素属性href=":///baidu.com"

每个节点都有对应的信息

  1. nodeName 节点名称
  2. nodeType 节点类型
  3. nodeValue 节点的值
<div id="one" abc="abcv">  woshi </div>

// 元素节点
one.nodeName;  //DIV
one.nodeType;  //1
one.nodeValue; //null 

//属性节点
//首先要获取指定属性  **attributes**
var e = one.attributes.abc; //获取abc属性
e.nodeName;  //abc
e.nodeType;  //2 
e.nodeValue; //abcv   //获取到属性值

//文本节点   **firstChild**
one.firstChild.nodeName;   //#text  
one.firstChild.nodeType;   //3
one.firstChild.nodeValue;  // 文本 woshi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这3个很重要

  1. 获取属性的值 getAttribute()
<a id="one" abc="123">111</a>

var val = one.getAttribute('abc')  //获取到abc属性的值
console.log(val)   // 123;
1
2
3
4
  1. 设置属性的值 setAttribute() ***
<a id="one" abc="123">111</a>

one.setAttribute('two','456')  //设置新的属性和值
one.setAttribute('abc','000')  //修改已有的属性的值
//<a id="one" abc="000" two="456">111</a>
1
2
3
4
5
  1. 设置class名 className ***
<a id="one" abc="123">111</a>

one.className = 'aaa';    //设置一个class=“aaa"
//如果要加多个class名，拼接的方法

one.className =one.className+" bb"  // 空格+class
// <a id="one" abc="123" class="aaa bb">111</a>
1
2
3
4
5
6
7

# 2.节点之间的关系

节点间存在 **父、子、兄弟 **关系

  1. 子节点 childNodes
// 获取所有子节点
<ul id="laoba">
    <li>大牛</li>
    <li>二牛</li>
    <li>三牛</li>
    <li>四牛</li>
    <li id="ming">小明</li>
    <li>小牛牛</li>
</ul>

var sou = laoba.childNodes;   //包含所有子节点，空格也算   // 7+6(li) =13
1
2
3
4
5
6
7
8
9
10
11

清除空白节点的函数

function cleanWhitespace(element){
    for(var i=0; i < element.childNodes.length; i++){
        var node = element.childNodes[i];
        //判断是否是空白节点，如果是则删除该节点
        if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){
            node.parentNode.removeChild(node);
        }
    }
}
// 删除空白节点
1
2
3
4
5
6
7
8
9
10
  1. 获取父节点 parentNode
var parent = ming.parentNode;   //获取到整个ul   
// html的父节点 是   #document
1
2
  1. 兄弟节点---弟弟节点 nextSibling
var didi = ming.nextSibling.nextSibling; //也会获取到上面所说的空白，所有加两个
1
  1. 兄弟节点---哥哥节点 previousSibling
var gege = ming.previousSibling.previousSibling;  //也会获取到上面所说的空白，所有加两个
1

12event.md