DOM节点操作

bubbleJessica

已于 2022-12-29 16:24:09 修改

阅读量893

点赞数

分类专栏： js 文章标签：前端 javascript html

于 2022-12-29 16:23:42 首次发布

本文链接：https://blog.csdn.net/bubbleJessica/article/details/128481575

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

节点操作

改变元素节点中的内容可以使用两个相关属性：innerHTML innerText

注意字符串不能换行

innerHTML属性能以HTML语法设置节点中的内容

innerText属性只能以纯文本的形式设置节点中的内容

节点创建

document.createElement()方法用于创建一个指定tagname的HTML元素，例如创建div标签

var oDiv=document.createElement('div');

任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点 父节点.appendChild(孤儿节点);

任何已经在DOM树上的节点，都可以调用insertBefore()方法，它可以将孤儿节点挂载到它的内部，成为它的"标杆子节点"之前的节点 父节点.insertBefore(孤儿节点,标杆节点);

<div id="box">
    <p>我是原本的段落0</p>
    <p>我是原本的段落1</p>
    <p>我是原本的段落2</p>
</div>
<script>
    var oBox=document.getElementById('box');
    //创建孤儿节点
    var oP=document.createElement('p');
    //设置内部文字
    oP.innerText='我是新来的';
    //上树
    pBox.appendChild(oP);
</script>

左下角页面图

右上角页面图

<div id="box">
    <p>我是原本的段落0</p>
    <p>我是原本的段落1</p>
    <p>我是原本的段落2</p>
</div>
<script>
    var oBox=document.getElementById('box');
    var oPs=oBox.getElementsByTagName('p');
    //创建孤儿节点
    var oP=document.createElement('p');
    //设置内部文字
    oP.innerText='我是新来的';
    //上树
    oBox.insertBefore(oP,oPs[0]);    
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        td {
            width: 120px;
            height: 30px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<table id="mytable"></table>
<script>
    var mytable = document.getElementById('mytable');
    for (var i = 1; i <= 9; i++) {
        var tr = document.createElement('tr');
        for (var j = 1; j <= i; j++) {
            var td = document.createElement('td');
            td.innerText = i + '*' + j + '=' + (i * j);
            tr.appendChild(td);
        }
        mytable.appendChild(tr);
    }
</script>
</body>
</html>

移动节点

删除节点

克隆节点

改变元素节点的HTML属性(src,href)只需要直接打点进行更改即可 oImg.src='images/2.jpg';(条件符合W3C标准属性)

不符合W3C标准属性，要使用setAttribute('属性名',值)和getAttribute('属性名')来设置、读取

nodeType常用属性值

document对象表示整个HTML文档，它是DOM节点树的根 typeof document -> "object"

访问元素节点的常用方法

注意事项：1.如果id同名出现多个的话，getElementById()获取到的是第一个id

2.getElementsByTagName()通过标签名得到节点数组

3.getElementsByClassName()通过类名得到节点数组

4.如果有多个元素符合条件，querySelector()得到页面上第一个元素

延迟运行

给window对象添加onload事件监听。onload表示页面都加载完毕了。

节点的关系

所有节点：空文本节点注释节点元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">
    <p>段落1</p>
    <p id="para">段落2
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
    <p>段落3</p>
</div>
<script>
    var box=document.getElementById('box');
    var para=document.getElementById('para');
    // 获取元素子节点函数 类似children属性功能
    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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">
    <p>段落1</p>
    我是文本
    <!--我是注释-->
    <p id="para">段落2
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
    <p>段落3</p>
</div>
<script>
    var box=document.getElementById('box');
    var para=document.getElementById('para');
    // 封装一个获取前一个兄弟元素节点函数
    function getElementPrevSibling(node){
        var o=node;
        while (o.previousSibling!=null){
            if (o.previousSibling.nodeType==1){
                return o.previousSibling;
            }
            o=o.previousSibling;
        }
        return null;
    }
    console.log(getElementPrevSibling(para));
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">
    <p>段落1</p>
    我是文本
    <!--我是注释-->
    <p id="para">段落2
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
    <p>段落3</p>
</div>
<script>
    var box=document.getElementById('box');
    var para=document.getElementById('para');
    // 封装一个获取所有兄弟元素节点函数
    function getAllElementSibling(node){
        var prevs=[];
        var nexts=[];
        var o=node;
        while (o.previousSibling!=null){
            if (o.previousSibling.nodeType==1){
                prevs.unshift(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));
</script>
</body>
</html>