＜JavaScript＞DOM-节点

目录

1.什么是DOM？

1.1 DOM简介

1.2 访问元素节点

1.2.1 document对象

1.2.1 访问元素节点的常用方法（注意得到的事元素or元素数组！）

 1.2.2 延迟运行

1.3 节点的关系（注意：文本节点也属于节点）

1.3.1 排除文本节点的干扰

1.4 手写常见的节点关系函数

1.4.1 返回所有元素的子元素节点（兼容到IE6），类似children的功能

1.4.2 返回元素的前一个兄弟元素节点（兼容到IE6），类似previousElemmentSibling

 1.4.3 返回元素的所有元素兄弟节点

1.5 如何改变元素节点中的内容？innerHTML、innerText

2.节点操作

2.1 如何改变元素节点的CSS样式？(事件监听)

2.2 如何改变元素节点的HTML属性？

2.2.1 标准的W3C属性，如src、href等，直接打点进行更改

2.2.2 不符W3C标准的属性，要使用setAttribute()h和getAtrribute()来设置、读取

2.3 节点的创建、移除与克隆

2.3.1 节点的创建createElement()并插入DOM树appendChild()、insertBefore()

2.3.2 移动节点

2.3.3 删除节点

2.3.4 克隆节点

1.什么是DOM？

DOM是JS操控HTML和CSS的桥梁

DOM使JS操作HTML变得“优雅”，比如如下例子：

想在“牛奶”后面插入“可乐”，这里的思维是“字符串思维”，我们要一个一个字符的去找“牛奶”的<p>标签的最后一个字符">"，然后再去插入<p>可乐<p>，这样很慢，也很反人类。

 那么DOM则是把其HTML文档结构看作“结点思维”，即把div和p当做父子节点，这样会方便很多

1.1 DOM简介

  • DOM(Document Object Model，文档对象模型)是JS操作HTMK文档的接口，使文档操作变得非常优雅、简便。
  • DOM最大的特点就是将文档表示为节点树

 节点的nodeType属性可以显示如上这些节点的具体类型：

1.2 访问元素节点

访问、得到、获取页面上的元素节点

1.2.1 document对象

 

1.2.1 访问元素节点的常用方法（注意得到的事元素or元素数组！）

  •  getElementById()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box1">盒子1 11111111</div>
    <script>
        //得到盒子1
        var box1=document.getElementById('box1');
        var box2=document.getElementById('box2');

        alert(box1.nodeType);
        alert(typeof box1);
    </script>
</body>
</html>

 

 “藏得深”的意思就是即便box1在多层嵌套的标签里(比如p,ul,li)，DOM仍然可以把他找到。 

  • getElmentsByTagName()

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>段落阿斯顿撒旦</p>
    <p>段落阿斯顿撒旦</p>
    <p>段落阿斯顿撒旦</p>
    <p>段落阿斯顿撒旦</p>
    <script>
        //得到P标签的 数组
        var ps=document.getElementsByTagName('p');
        console.log(ps);
        
    </script>
</body>
</html>

若段落存在于多个div中，这时直接调用getElementsByTagName会把所有的p都get到。如下例子，就会吧把8个全部get到。这是就需要先get一个div的id再去做。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <p>段落阿斯顿撒旦</p>
        <p>段落阿斯顿撒旦</p>
        <p>段落阿斯顿撒旦</p>
        <p>段落阿斯顿撒旦</p>    
    </div>
    <div id="box2">
        <p>段落阿斯顿撒旦</p>
        <p>段落阿斯顿撒旦</p>
        <p>段落阿斯顿撒旦</p>
        <p>段落阿斯顿撒旦</p>    
    </div>
    
    <script>
        var box1=document.getElementById('box1');

        //得到P标签的 数组
        var ps_inbox1=box1.getElementsByTagName('p');
        console.log(ps_inbox1);
        
    </script>
</body>
</html>

  • getElementsByClassName()

用法与getElementsByTagName()类似，这里不再赘述

  • querySelector()

只能得到页面上的一个元素，这一点与getElementById()类似

  • querySelectorAll()

 1.2.2 延迟运行

 

暂时存疑，后面再说

1.3 节点的关系（注意：文本节点也属于节点）

1.3.1 排除文本节点的干扰

 举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是段落1</p>
        <p id="para">我是段落1</p>
        <p>我是段落1</p>
    </div>
    <script>
        var box=document.getElementById('box');
        var para=document.getElementById('para');

        // 所有的子结点
        console.log(box.childNodes);
        // 所有的元素子结点
        console.log(box.children);

        // 第一个子结点
        console.log(box.firstChild);
        console.log(box.firstChild.nodeType);
        // 第一个元素子结点（IE9开始兼容
        console.log(box.firstElementChild);

        // 最后一个子结点
        console.log(box.lastChild);
        console.log(box.lastChild.nodeType);
        // 最后一个元素子结点
        console.log(box.lastElementChild);


        // 父节点
         console.log(para.parentNode);
        // 前一个兄弟节点
        console.log(para.previousSibling);
        console.log(para.previousElementSibling);

        // 后一个兄弟节点
        console.log(para.nextSibling);
        // 后一个兄弟元素节点
        console.log(para.nextElementSibling);
    </script>
</body>
</html>

 第一个childNodes，可以看到有7项，而不是3项，原因是把<p>左右的空白文本text也算了进去。 

 第二个：所有元素子结点，有3个，也就是3个p标签

第三个：第一个子结点和其类型，是文本节点，其结点属性值是3

 

 第四个：第一个元素子结点，很明显是第一个<p>标签

 第五个：最后一个子结点，与其属性值。同样是text

第六个：同四，p标签

其余的，父节点，与上面同理，不再赘述，注意写法即可。

 

1.4 手写常见的节点关系函数

1.4.1 返回所有元素的子元素节点（兼容到IE6），类似children的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是段落A</p>
        <p id="para">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </p>
        <p>我是段落C</p>
    </div>
    <script>
        var box=document.getElementById('box');
        var para=document.getElementById('para');

        // 封装一个函数，返回元素的所有子元素节点（兼容到IE6
        function getChildren(node){
            var children=[];
            for(var i=0;i<node.childNodes.length;i++){
                if(node.childNodes[i].nodeType==1){
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }
        console.log(getChildren(box));
        console.log(getChildren(para));
    </script>
</body>
</html>

1.4.2 返回元素的前一个兄弟元素节点（兼容到IE6），类似previousElemmentSibling

function getElementPrevioudSibling(node){
    var o=node;
    while(o.previousSibling!=null){
        if(o.previousSibling.nodeType==1){
            return o.previousSibling;
        }
        o=o.previousSibling;
    }
}
console.log(getElementPrevioudSibling(para));

 1.4.3 返回元素的所有元素兄弟节点

function getAllElementSibling(node){
    var prevs=[];
    var nexts=[];
    
    var o=node;
    while(o.previousSibling!=null){
        if(o.previousSibling.nodeType==1){
            prevs.push(o.previousSibling);
        }
        o=o.previousSibling;
    }
    o=node;
    while(o.nextSibling!=null){
        if(o.nextSibling.nodeType==1){
            nexts.push(o.nextSibling);
        }
        o=o.nextSibling;
    }
    return prevs.concat(nexts);
}
console.log(getAllElementSibling(para));

1.5 如何改变元素节点中的内容？innerHTML、innerText

 

 

2.节点操作

2.1 如何改变元素节点的CSS样式？(事件监听)

 通过改变行内值来改变css样式

 

 代码例子：

2.2 如何改变元素节点的HTML属性？

2.2.1 标准的W3C属性，如src、href等，直接打点进行更改

2.2.2 不符W3C标准的属性，要使用setAttribute()h和getAtrribute()来设置、读取

 

 

2.3 节点的创建、移除与克隆

2.3.1 节点的创建createElement()并插入DOM树appendChild()、insertBefore()

孤儿节点：

 

 appendChild()

insertBefore()

 

代码举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是原本的段落0</p>
        <p>我是原本的段落1</p>
        <p>我是原本的段落2</p>

    </div>
    <script>
        var oBox=document.getElementById('box');
        var oPs=document.getElementsByTagName('p');
        // 创建孤儿结点
        var oP=document.createElement('p');
        // 设置内部文字
        oP.innerText='我是新来的';
        // 上树
        // oBox.appendChild(oP);
        oBox.insertBefore(oP,oPs[0]);
    </script>
</body>
</html>

举例：乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            width: 120px;
            height: 40px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <table id="mytable">

    </table>
    <script>
        var mytable=document.getElementById('mytable');

        for(var i=1;i<=9;i++){
            // 创建了新的tr标签
            var tr=document.createElement('tr');
            for(var j=1;j<=i;j++){
                //  创建新的td标签
                var td=document.createElement('td');
                // 设置td内部文字
                td.innerText=i+'乘'+j+'等于'+(i*j);
                // 让tr追加td标签
                tr.appendChild(td);
            }
            // 让mytable追加tr标签
            mytable.appendChild(tr);
        }
    </script>
</body>
</html>

2.3.2 移动节点

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <p id="para">我是段落</p>
    </div>
    <div id="box2"></div>

    <script>
        var box1=document.getElementById('box1');
        var box2=document.getElementById('box2');
        var para=document.getElementById('para');

        box2.appendChild(para);

    </script>
</body>
</html>

 

<body>
    <div id="box1">
        <p id="para">我是段落</p>
    </div>
    <div id="box2">
        <p>box2原有段落</p>
        <p>box2原有段落</p>
        <p>box2原有段落</p>
        <p>box2原有段落</p>
    </div>

    <script>
        var box1=document.getElementById('box1');
        var box2=document.getElementById('box2');
        var para=document.getElementById('para');
        var ps_inbox2=box2.getElementsByTagName('p');

        // box2.appendChild(para);
        box2.insertBefore(para,ps_inbox2[0]);
    </script>
</body>

 

2.3.3 删除节点

 

2.3.4 克隆节点

 

 

版权声明：本文为Jason6620原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。