Web前端JavaScript笔记（4）节点

如何获取元素节点的属性：

在Web前端JavaScript笔记（3）对象中，介绍了访问行间属性的方法，除此之外，系统还提供了三个方法访问元素的属性：

1. setAttribute:

2. getAttribute:

3. removeAttribute:

区别：

1. class属性的访问，class与className的区别

2. 行间的自定义属性，例如在 div中自定义属性，可以通过getAttribute方法访问到，但上一节中介绍的方法不支持自定义属性。

3. setAttribute还可以自定义属性并且进行赋值，其他的方法不支持。

4. 删除标签的属性，其他方法是没办法删除属性的，只能将属性设置为""，而removeAttribute()可以将属性删除。

5. innerHtml 获取标签间的内容，会解析文本

6. innerText 获取标签间的纯文本，不会解析标签，设置纯文本

7. outerHTML 从外标签开始到外标签结束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function () {
            let tag = document.getElementById("div1");
            // 访问行间属性
            alert(tag.getAttribute("class"));
            alert(tag.getAttribute("title"));
            alert(tag.getAttribute("self"));   // 访问自定义属性
            tag.setAttribute("zx", "over");    // 设置自定义的属性
            tag.removeAttribute("title");

            alert(tag.innerHTML);   // 获取标签之间的内容
            alert(tag.innerText);
            alert(tag.outerHTML);
        }

    </script>
</head>
<body>
    <div id="div1" class="box" title="hello" self="me">
        <span>content</span>
    </div>
</body>
</html>

获取子节点：

系统提供的访问子节点的方法: （这些子节点共分为三类）

1. childNodes()：访问当前节点下所有的子节点，返回对象数组

2. lastChild()：访问当前节点下最后一个子节点

3. firstChild()：访问当前节点下第一个子节点

4. nextSibling: 当前节点的下一个兄弟节点

5. previousSibling：当前节点的上一个兄弟节点

同时，系统为每个节点提供了三个属性：

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

当标签出现换行，缩进的时候，系统也会把换行符，空格当作元素属性，所以通过childNodes获取到的元素子结点个数大于实际的子节点个数，可以通过以下的方法来去除这些空白符的影响：

【注】：下面的方法只能获取子结点中的元素节点

1. children ：只获取元素节点

2. firstElementChild：

3. lastElementChild：

4. nextElementSibling：

5. previousElementSibling：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function () {
            let tag = document.getElementById("div1");
            alert(tag.childNodes.length);
            alert(tag.childNodes[0]);
            alert(tag.childNodes[1]);
            alert(tag.childNodes[2]);
            alert(tag.lastChild);

            // 元素属性：
            alert(tag.childNodes[0].nodeType);
            alert(tag.childNodes[1].nodeType);
            alert(tag.childNodes[2].nodeType);
        }

    </script>
</head>
<body>
    <div id="div1" class="box" title="hello" self="me">  <!--换行的时候会把换行符，空格也会算作元素-->
        <em>content</em>
        节点
        <strong>new node</strong>
    </div>
</body>
</html>

如何获取元素节点的属性节点：

系统提供了attributes方法用于获取元素节点上的所有属性节点：获取到元素的属性节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function () {
            let tag = document.getElementById("div1");
            alert(tag.attributes);
            alert(tag.attributes.getNamedItem("title"));
            alert(tag.attributes["title"]);   // 简便写法
        }

    </script>
</head>
<body>
    <div id="div1" class="box" title="hello" self="me">  <!--换行的时候会把换行符，空格也会算作元素-->
        节点
    </div>
</body>
</html>

DOM的节点操作：

// document.write()会覆盖掉原来页面上的内容

系统提供的节点操作的方法：

1. document.createElement () : 创建节点, 参数：标签名返回值：创建好的标签

2. Node.appendChild(node)：将某一个节点插入当前节点的子节点内

3. document.createTextNode(文本) 创建文本标签（纯文本，即使有标签也不会解析）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function () {
            let tag_div = document.getElementById("div1");
            let tag_btn = document.getElementById("btn1");
            tag_btn.onclick = function () {
                let tag_p = document.createElement("p");    // 创建一个p标签
                let text_content = document.createTextNode("hello javascript");
                tag_p.appendChild(text_content);
                tag_div.appendChild(tag_p);
            }
        }

    </script>
</head>
<body>
    <div id="div1" class="box">
        <em>This</em>
        节点
        <strong>Content</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>
</html>

每次点击按钮，会添加新的文本标签到div元素中

4. insertBefore() ：格式： box1.parentNode.insertBefore(box2, box1);

功能：将box2添加到box1的前面

5. box1.parentNode.replaceChild(box2, box1); 用box2节点替换box1节点

6. node.cloneNode()：克隆出一个新的node节点，返回值就是新创建的node节点，只克隆节点本身

node.cloneNode(true)：克隆node节点本身以及其所有的子节点

7. box.parent.removeChild(box)：删除box节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function () {
            let tag_div = document.getElementById("div1");
            let tag_btn = document.getElementById("btn1");
            tag_btn.onclick = function () {
                let tag_p = document.createElement("p");    // 创建一个p标签
                let text_content = document.createTextNode("hello javascript");
                tag_p.appendChild(text_content);
                document.body.replaceChild(tag_p, tag_div);   // 替换节点
            }
        }

    </script>
</head>
<body>
    <div id="div1" class="box">
        <em>This</em>
        节点
        <strong>Content</strong>
    </div>
    <button id="btn1">节点操作</button>
</body>
</html>

节点操作的案例：

实现在输入框中输入内容，点击添加之后可以添加一条记录，点击删除按钮可以删除最后一条记录，点击克隆按钮可以克隆最后一条记录：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function () {
            let input_tag = $("input_text");
            let bottom_section = $("bottom");
            $("add").onclick = function () {
                let input_content = input_tag.value;
                if(!input_content){
                    alert("请输入内容");
                }
                else{
                    // 开始创建节点
                    let node = document.createElement("div");
                    let text_node = document.createTextNode(input_content);
                    let btn_node = document.createElement("button");
                    let btn_text_node = document.createTextNode("x");
                    btn_node.appendChild(btn_text_node);
                    node.appendChild(text_node);
                    node.appendChild(btn_node);
                    node.style.background = randomColor();
                    bottom_section.appendChild(node);
                    input_tag.value = "";   // 清空输入框
                    updateItemsButtons();
                }
            };

            $("delete").onclick = function () {
                let last_node = bottom_section.lastChild;
                bottom_section.removeChild(last_node);
                updateItemsButtons();
            };

            $("clone").onclick = function () {
                let last_node = bottom_section.lastChild;
                let clone_node = last_node.cloneNode(true);   // 深拷贝
                bottom_section.appendChild(clone_node);
                updateItemsButtons();
            };

            function updateItemsButtons() {
                // 对每条记录上的删除按钮绑定函数
                let child_nodes = bottom_section.children;  // 只获取div元素节点
                let btn_arr = [];
                for(let i=0; i<child_nodes.length; i++)
                {
                    btn_arr.push(child_nodes[i].firstElementChild);
                    //console.log(child_nodes[i].children);
                }
                // 对标签绑定事件函数
                for (let i=0; i<btn_arr.length; i++)
                {
                    // console.log(btn_arr[i]);
                    btn_arr[i].index = i;
                    btn_arr[i].onclick = function () {
                        bottom_section.removeChild(child_nodes[this.index]);
                    }
                }
            }
        }

    </script>
    <style>
        #container{
            width: 200px;
            border: 1px solid black;
        }
        #top{
            width: 100%;
            height: 30px;
        }
        #top input{
            height: 20px;
            line-height: 30px;
            margin: 0 auto;
        }
        #middle{
            width: 100%;
            height: 50px;
            border: none;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            background: #0f6674;
        }
        #middle button{
            /*width: 25%;*/
            height: 50%;
            align-self: center;
            /*margin-top: 10px;*/
        }

        #bottom{

        }

        #bottom div{
            height: 25px;
            position: relative;
        }
        #bottom div button{
            position: absolute;
            top: 1px;
            right: 2px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="top">
            <input type="text" id="input_text" placeholder="请输入内容">
        </div>
        <div id="middle">
            <button id="add">添加</button>
            <button id="delete">删除</button>
            <button id="clone">克隆</button>
        </div>
        <div id="bottom">
            <!--<div>content<button>x</button></div>-->
        </div>
    </div>
</body>
</html>

选项卡：

实现选项卡切换的时候，呈现选定状态的样式以及下方显示相对应的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function(){
            let btn_arr = $("buttons");
            let buttons = btn_arr.getElementsByTagName("button");
            let content_box = $("content");
            let contents = content_box.getElementsByTagName("div");
            // 为按钮添加事件绑定函数
            for (let i=0; i<buttons.length; i++)
            {
                buttons[i].index = i;
                buttons[i].onclick = function () {
                    for (let j=0; j<buttons.length; j++)
                    {
                        buttons[j].className = "";
                        contents[j].style.display = "none";
                    }
                    this.className = "active";
                    contents[this.index].style.display = "block";
                }
            }
        }
    </script>
    <style>
        #container{
            width: 200px;
            height: 300px;
            border: 1px solid black;
        }
        #container #buttons{
            height: 30px;
        }
        #container #content{
            border-top: 1px solid black;
        }
        .active{
            background: #00aa88;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="buttons">
            <button class="active">python</button>
            <button>Java</button>
            <button>C++</button>
        </div>
        <div id="content">
            <div style="display: block">欢迎学习python</div>
            <div style="display: none">欢迎学习Java</div>
            <div style="display: none">欢迎学习C++</div>
        </div>
    </div>
</body>
</html>

offset系列方法-快速获取当前页面上的宽，高，距左距离和距右距离:

1. offsetWidth:

2. offsetHeight:

3. offsetLeft:

4. offsetTop:

区别：
通过node.style.width / height获取的是html盒模型中content的大小

offsetWidth / offsetHeight获取的是盒模型中content+padding+border的大小

offsetLeft / offsetTop得到的是距离页面左上角的距离

文档碎片：

利用文档碎片可以大幅提高文档的运行效率:

应用：例如需要在页面上创建10万个节点，将10万个节点全部添加到页面上

提示: 官方提示的计时器： console.time("hh") 代码 console.timeEdn();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function(){
            //创建十万个节点，没创建一个，插入一个到body中
            console.time("test1");
            for (let i=0; i<100000; i++)
            {
                let new_tag = document.createElement("div");
                document.body.appendChild(new_tag);
            }
            console.timeEnd("test1");     // 官方提供的计时器

            // // 先创建所有节点，在插入节点
            console.time("test2");
            let node = document.createElement("div");    // 先创建一个标签
            for (let i=0; i<100000; i++)
            {
                let new_node = document.createElement("div");
                node.appendChild(new_node);
            }
            document.body.appendChild(node);
            console.timeEnd("test2");     // 官方提供的计时器
        }
    </script>
</head>
<body>

</body>
</html>

第二种方法插入节点的速度更快，称之为文档碎片操作。

数组元素的遍历方法：

1. for循环

2. for-in

3. for-each方法：

<script>
        window.onload = function(){
            let arr = [1,4,2,3,4,2];
            for (let i=0; i<arr.length; i++)
            {
                console.log(i);
            }

            for(let elem in arr){
                console.log(elem);
            }

            arr.forEach(function (item, index, arr) {
                console.log(item);
            })
        }
</script>

------------------------------------------------------------------------------------------------------------------------

posted @ 2020-03-26 14:20 Alpha205 阅读(139) 评论(0) 编辑收藏举报

刷新页面返回顶部

途径北海道

Web前端JavaScript笔记（4）节点

公告