An article on detailed operations on JavaScript DOM-JS Tutorial-php.cn

This article brings you relevant knowledge about javascript, which mainly introduces related issues about the detailed operation of DOM, including what is DOM, what is DOM Tree, how to obtain DOM, etc. Let’s take a look at the content below, I hope it will be helpful to everyone.

An article on detailed operations on JavaScript DOM

[Related recommendations: javascript video tutorial, web front-end]

What is DOM?

Document Object Model, abbreviated DOM, Chinese: Document Object Model, is the standard programming interface## recommended by the W3C organization for processing extensible markup languages.

#What is DOM Tree?

DOM Tree refers to parsing the HTML page through DOM and generating The HTML tree tree structure and the corresponding access method, with the help of DOM Tree, we can directly and easily operate on the HTML page The content of each tag, such as the following HTML code

    <title>玩转dom</title>
    <p>我是一个dom节点</p>
    <p>
        </p><p>p p</p>

Copy after login

, is abstracted into a DOM tree as shown below:

An article on detailed operations on JavaScript DOM

After understanding the above knowledge, the following is the study of the API, I will explain from four aspects: how to get DOM, how to create and add DOM, how to modify DOM and how to delete DOM. Follow up

Get DOM

There are many APIs to get DOM, but It’s all very simple, come on

1. Get by id

Syntax:

document.getElementById("id name");

Copy after login

Example:

    <p>我是p节点</p>
    <script>
        var p = document.getElementById("p");
        console.log(p);
    </script>

Copy after login

An article on detailed operations on JavaScript DOM

Open the console and you can see that you have successfully obtained

2. Obtain via tag name

Syntax:

document.getElementsByTagName("tag name");

Copy after login

Example:

    <p>我是p节点</p>
    <p>我也是p节点</p>
    <script>
        var p = document.getElementsByTagName("p");
        console.log(p);
        for (let i = 0; i < p.length; i++) {
            console.log(p[i]);
        }
    </script>

Copy after login

An article on detailed operations on JavaScript DOM

Note: Use the getElementsByTagName() method to return a collection of objects with the specified tag name, because what we get is a collection of objects, so we want To operate the elements inside, you need to traverse. Note: The element object obtained using this method is dynamic

3. Obtain through the class name

Syntax:

document.getElementsByClassName("class name");

Copy after login

Example:

    <p>我是p节点</p>
    <p>我是p节点</p>
    <script>
        var p = document.getElementsByClassName("p");
        console.log(p);
        for (let i = 0; i < p.length; i++) {
            console.log(p[i]);
        }
    </script>

Copy after login

An article on detailed operations on JavaScript DOM

This is also very simple, just remember it

4. Obtain [Recommendation] through HTML5 new api

Grammar:

document.querySelector("详见实例");

Copy after login

document.querySelectorAll("详见实例");

Copy after login

Example:

    <p>我是p节点</p>
    <p>梨花</p>
    <p>信息</p>
    <script>
        // 通过标签名获取
        var p = document.querySelector("p");
        // 通过类名获取，记得加点
        var qname = document.querySelector(".name");
        // 通过id获取，记得加#
        var info = document.querySelector("#info");
        // 获取匹配到的所有元素，返回数组
        var all = document.querySelectorAll("p");
        console.log(p);
        console.log(qname);
        console.log(info);
        for (let i = 0; i < all.length; i++) {
            console.log(all[i]);
        }
    </script>

Copy after login

An article on detailed operations on JavaScript DOM

You can see that using the new API of html5 is very flexible, so I like it very much Using this, it is also recommended that you use

5. Special element acquisition

In addition, there are some special elements that have their own acquisition methods, such as body and html elements

Get the body element

Syntax:

document.body;

Copy after login

Example:

    <script>
        var body = document.body;
        console.log(body);
    </script>

Copy after login

An article on detailed operations on JavaScript DOM You can see that all the contents of the body element were successfully obtained

Get html element

Syntax:

document.documentElement;

Copy after login

Example:

    <script>
        var html = document.documentElement;
        console.log(html);
    </script>

Copy after login

An article on detailed operations on JavaScript DOM As you can see, the entire web page html has been obtained. OK, so far, getting the DOM has come to an end. Now let’s start learning to dynamically create and add DOM

Create and add DOM

To put it bluntly, operating DOM is the same as playing with data, adding, deleting, modifying and checking , and creating and adding is equivalent to adding. When we add data, we must first have the data, and then add it. The same is true for DOM operations. First, we must create the DOM, and then tell it where to add it. Finally, the operation is completed. Let’s learn below. How to create dom, and, how to add dom

Dynamicly create DOM

It’s very simple, don’t be afraid, haha

Syntax:

document.createElement("元素名");

Copy after login

Example:

If you want to dynamically create an element
p, you can write it like this. The same is true for other things. Draw inferences from one example

var p = document.createElement("p");

Copy after login

Dynamicly add DOM

There are two types of adding dom, according to It is used in various situations, one is to append at the end of the child element of the parent element, the other is to append after specifying the child element

Append at the end

Syntax:

node.appendChild(child);

Copy after login

Example:

    <p>
        <a>百度一下</a>
    </p>

    <script>
        var p = document.createElement("p");
        p.innerText = "我就是p"
        var p = document.querySelector("p");
        p.appendChild(p);
    </script>

Copy after login

An article on detailed operations on JavaScript DOM

动态创建元素p段落标签，并写入文字“我就是p”，最后获取p元素，并将p追加为p的孩子，这种追加方式是在末尾追加，因此效果如上图所示

指定元素后追加

语法：

node.insertBefore(child, 指定元素);

Copy after login

实例：

    <p>
        <a>百度一下</a>
        <span>我是span弟弟</span>
    </p>

    <script>
        var p = document.createElement("p");
        p.innerText = "我就是p"
        var p = document.querySelector("p");
        var a = document.querySelector("a");
        // 在p下创建p，位置在a元素之前
        p.insertBefore(p, a);
    </script>

Copy after login

An article on detailed operations on JavaScript DOM

这就完了？对啊，你以为呢？是不是很简单呢，简单就对了，剩下的就是要多练习了，好，进入下一环节，如何修改 DOM 呢？

修改 DOM

总结如下：

An article on detailed operations on JavaScript DOM

例子1：获取页面的p标签，并将内容改为 “周棋洛”

    <p>
        </p><p></p>
    

    <script>
        var p = document.querySelector("p");
        p.innerText = "周棋洛";
    </script>

Copy after login

例子2：点击按钮生成百度的超链接

    <p>
        <button>点击生成百度超链接</button>
    </p>

    <script>
        function createBaidu() {
            var p = document.querySelector("p");
            var a = document.createElement("a");
            a.href = "https://www.baidu.com";
            a.innerText = "百度一下，你就知道";
            p.append(a);
        }
    </script>

Copy after login

An article on detailed operations on JavaScript DOM

例子3：点击按钮，p标签内文字颜色变绿，手动狗头

    <p>
        <button>点击变绿</button>
        </p><p>我一会就变绿</p>
    

    <script>
        function changeColor() {
            var p = document.querySelector("p");
            p.style.color = "green";
        }
    </script>

Copy after login

An article on detailed operations on JavaScript DOM

删除 DOM

node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点

语法：

node.removeChild(child);

Copy after login

案例：

    <p>
        <button>点击移除p</button>
        </p><p>我是p，一会就时间到了</p>
    

    <script>
        function removeP() {
            var p = document.querySelector("p");
            var p = document.querySelector("p");
            p.removeChild(p); 
        }
    </script>

Copy after login

An article on detailed operations on JavaScript DOM

【相关推荐：javascript视频教程、web前端】

The above is the detailed content of An article on detailed operations on JavaScript DOM. For more information, please follow other related articles on the PHP Chinese website!