Home > Article > Web Front-end > How to get the node of html file in javascript

How to get the node of html file in javascript

青灯夜游Original: 2022-01-23 18:36:012067browse

Method: 1. Use the "document.getElementById("id attribute value")" statement; 2. Use the "document.getElementsByTagName("Tag name")" statement; 3. Use the "document.documentElement" statement .

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

1. Obtain through document node (direct acquisition)

Case:

<body>
    <ul >
        <li id="one">一个</li>
        <li name="name1" >二个</li>
        <li class="classname">三个</li>
        <li>四个</li>
    </ul>
</body>

1.1 Through ID

Syntax: document.getElementById("id attribute value")

Features: Get the element based on the ID value and return the element object; (id is unique)
Example:

  var one=document.getElementById("one");
    console.log(one);

How to get the node of html file in javascript

1.2 By tag name

Syntax: document.getElementsByTagName("tag name")

Features: tag name Get the element and return a pseudo array, which stores multiple DOM objects;

Example:

 var li=document.getElementsByTagName("li")
    console.log(li);

How to get the node of html file in javascript

##1.3 By name Value

Syntax:

document.getElementsByName("value of name attribute")

Features: Get elements based on the value of name attribute, and return a Pseudo array, which stores multiple DOM objects

Example:

var name1=document.getElementsByName("name1")[0];
    console.log(name1);

How to get the node of html file in javascript

#1.4 Through class

Syntax:

document.getElementsByClassName("Name of class style")

Features: Get elements based on the name of class style, and return a pseudo array that stores multiple DOM objects

Example:

 var classname=document.getElementsByClassName("classname")[0];
    console.log(classname);//

How to get the node of html file in javascript

1.5 Through the selector

Syntax:

document.querySelector("Name of the selector ")

Features: Get elements based on the selector and return an element object;

Example:

 var que1=document.querySelector("#one");
    console.log(que1); //

How to get the node of html file in javascript

1.6 Pass all selectors

Syntax:

document.querySelectorAll("name of selector")

Features: Get elements according to the selector and return is a pseudo-array that stores multiple DOM objects;

Example:

var queall=document.querySelectorAll("li");
    console.log(queall); //

How to get the node of html file in javascript

1.7 Obtaining special elements

Syntax:

doucumnet.body

Features: Return body element object

Example:

  var body=document.body ;
    console.log(body);

How to get the node of html file in javascript

1.8 Get HTML element

Syntax:

document.documentElement

Features: html element object

Example:

var dc=document.documentElement  ;
    console.log(dc);

How to get the node of html file in javascript 2. Get

through the parent node (usually after the parent node has been obtained, the child bytes are obtained through the parent node)

<body>
    <div id="digbox">
        <!-- 第一个 -->
        <div id="box1">
            <ul class="ul">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
            </ul>
        </div>
        <!-- 第二个 -->
        <div id="box2">
            <a href="#">这是第二个div</a>
        </div>

        <!-- 第三个 -->
        <div id="box3">
            <a href="#">这是第三个div</a>
        </div>
    </div>
</body>

2.1 Get the first Node

Syntax:

document.getElementById("test").firstElementChild;
document.getElementById("test").firstChild;

Features: Get the first node

Example:

var box=document.getElementById("digbox").firstElementChild;
    console.log(box);
     
    var box1=document.getElementById("digbox").firstChild;
    console.log(box1);

How to get the node of html file in javascript

2.2 Get the last child node

Syntax:

document.getElementById("test").lastElementChild;；
document.getElementById("test").lastChild;

Features: Get the last child node

Example:

 var box2= document.getElementById("digbox").lastElementChild;
    console.log(box2);

    var box3= document.getElementById("digbox").lastChild;
    console.log(box3);

How to get the node of html file in javascript

2.3 Get all child nodes

Syntax:

document.getElementById("test").children[0];
document.getElementById("test").childNodes;
document.getElementById("test").childElementCount;

Features: Get all child nodes

Example:

 var box4= document.getElementById("digbox").children[0];
    console.log(box4);

    var box5= document.getElementById("digbox").childNodes;
    console.log(box5);

    var box6= document.getElementById("digbox").childElementCount;
    console.log(box6);

How to get the node of html file in javascript

2.4 Get direct child nodes

Syntax:

document.getElementById("id")

Features: Get the direct child node

Example:

  var box7= document.getElementById("digbox");
    console.log(box7);

How to get the node of html file in javascript

2.5 Get the node with the corresponding attribute

Syntax:

document.getElementById("id").getElementsByClassName("ul");

Features: Commonly used to obtain the node of the corresponding attribute (can be ID, class, attribute, label);

Example:

    var box8= document.getElementById("digbox").getElementsByClassName("ul");
    console.log(box8);

How to get the node of html file in javascript

3. 通过兄弟节点获取

<body>
    <div id="box">
        <p>这是第一个标签</p>
        <p id="box2">这是第二个标签</p>
       <div ><a href="">这是第三个标签</a></div>
    </div>
</body>

3.1 获取当前节点的前一个节点

语法：

document.getElementById("id").previousElementSibling；
document.getElementById("id").previousSibling

特点：返回指定节点的前一个节点，如果没有 previousSibling 节点，则返回值为 null。

示例：

var box1=document.getElementById("box2").previousElementSibling;
  console.log(box1);

  var box2=document.getElementById("box2").previousSibling;
  console.log(box2);

How to get the node of html file in javascript

3.2 获取当前节点的后一个节点

语法：

document.getElementById("id").nextSibling
document.getElementById("id").nextElementSibling；

特点：返回指定节点之后紧跟的节点，如果没有 nextSibling 节点，则返回值为 null。

示例：

 var box3=document.getElementById("box2").nextElementSibling;
  console.log(box3);

  var box4=document.getElementById("box2").nextSibling;
  console.log(box4);

How to get the node of html file in javascript

4. 通过子级节点获取

4.1 通过子节点获取父级节点

<body>
    <div id="box">
        <p id="box2">这是第二个标签</p>
    </div>
</body>

语法：document.getElementById("id").parentNode

特点：返回指定节点的父节点,如果指定节点没有父节点，则返回 null。

示例：

  var box=document.getElementById("box2").parentNode;
  console.log(box);

How to get the node of html file in javascript

【相关推荐：javascript学习教程】

The above is the detailed content of How to get the node of html file in javascript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html NULL class 对象 dom 选择器 ul

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to change color using javascriptNext article：How to change color using javascript

See more

How to get the node of html file in javascript

1. Obtain through document node (direct acquisition)

through the parent node (usually after the parent node has been obtained, the child bytes are obtained through the parent node)

3. 通过兄弟节点获取

4. 通过子级节点获取

Related articles