js 笔记_09 节点操作知识及备忘录实战

最新推荐文章于 2022-07-23 14:45:00 发布

Web企鹅

最新推荐文章于 2022-07-23 14:45:00 发布

阅读量210

点赞数 1

分类专栏： CSS js html5 文章标签： css js html

本文链接：https://blog.csdn.net/Web_blingbling/article/details/107716066

版权

js 同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

html5

24 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 0 订阅

订阅专栏

获取子节点

childNodes：访问当前节点下所有的子节点；
firstChild：访问子节点中的首位；
lastChild：访问子节点中的最后一位；
nextSibling：访问当前节点的下一个兄弟节点；
previousSibling：访问当前节点的上一个兄弟节点；

但是上述的方法会将空格，回车等作为文本节点记入。（虽然空格回车等确实就是字符，但我们获取的时候并不想带它们，所以需要一个将纯空白的文本节点剔除的方法）

下面的方法只获取子节点中的元素节点。[ IE8 以下不兼容 ]
和前面的功能对应：

children
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling

	nodeType	nodeName	nodeValue
元素节点	1	标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

属性节点

attributes：获取当前元素节点上的所有的属性节点；
返回集合：无序，不重复
attributes.getNameItem(’ ‘)：获取其中某一个属性节点；
或 attributes[’ ']

节点操作

createElement()

格式： document. createElement()
参数：标签名；
返回值：创建好的这个节点；

appendChild()

格式：node1.appendChild(node2);
功能：将 node2 节点插入到 node1 节点子节点的末尾；

insertBefore()

格式：box1的父节点. insertBefore(box2,box1);
功能：将 box2 节点添加到 box1节点前面；

createTextNode()

格式：document.createTextNode( 文本 );
功能：创建文本节点（纯文本）；

replaceChild()

格式：box1的父节点. replaceChild(box2, box1);
功能：用 box2 节点将 box1 节点替换掉；

cloneNode()

格式：node. cloneNode()，默认返回节点本身；括号里填 true ，返回节点本身和里面的子节点。
返回值：克隆出来的新节点；

removeChild()

格式：box的父节点. removeChild( node );
功能：将 node 节点从页面上删除；
少时诵诗书

练习

设置一个简单的备忘录，输入框有增加，删除，拷贝功能：

html 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作练习</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div id="box">
        <div id="box1">
            <div class="centerWarp">
                <input type="text" id="inp" placeholder="请输入内容">
            </div>
            <button id="inc">增加</button>      
            <button id="remove">删除</button> 
            <button id="copy">拷贝</button>
        </div>
        <div id="box2"></div>
    </div>

    <script src="./src/sw.js"></script>
</body>

</html>

css 文件

#box {
    width: 200px;
    height: 400px;
    margin: 100px auto;
    border: black solid 1px;
    background-color: rgb(95, 166, 179);  
}

#box1 {
    width: 200px;
    height: 80px;
    margin: auto;
    background-color: rgb(63, 131, 177);  
}

button {
    margin: 10px;
}

.centerWarp {
    margin: 5px auto;
    text-align: center;
}

#inp {
    width: 180px;
    height: 30px;
}

js 文件

function $(something) {
    return document.querySelector(something);
}

// 随机颜色
function randomColor() {
    let str = `rgb(${parseInt(Math.random()*256)},
               ${parseInt(Math.random()*256)},
               ${parseInt(Math.random()*256)})`;
    return str;
} 

$('#inc').onclick = function() {
    if(! $('#inp').value){
        alert('输入内容不能为空');
    }else{
        let newDiv = document.createElement('div');
        newDiv.innerHTML = $('#inp').value
        newDiv.style.backgroundColor = randomColor();
        $('#box2').appendChild(newDiv);
    }
}

$('#remove').onclick = function() {
    $('#box2').removeChild($('#box2').lastChild);
}

$('#copy').onclick = function() {
    const newNode = $('#box2').lastChild.cloneNode(true);
    $('#box2').appendChild(newNode);
}