How to get the node of html file in javascript-Front-end Q&A-php.cn

How to get the node of html file in javascript

青灯夜游

Release： 2022-01-23 18:36:01

Original

2057 people have browsed it

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

How to get the node of html file in javascript

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>

Copy after login

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);

Copy after login

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);

Copy after login

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);

Copy after login

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);//

Copy after login

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); //

Copy after login

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); //

Copy after login

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);

Copy after login

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);

Copy after login

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>

Copy after login

2.1 Get the first Node

Syntax:

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

Copy after login

Features: Get the first node

Example:

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

Copy after login

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;

Copy after login

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);

Copy after login

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;

Copy after login

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);

Copy after login

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);

Copy after login

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);

Copy after login

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>

Copy after login

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

语法：

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

Copy after login

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

示例：

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

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

Copy after login

How to get the node of html file in javascript

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

语法：

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

Copy after login

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

示例：

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

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

Copy after login

How to get the node of html file in javascript

4. 通过子级节点获取

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

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

Copy after login

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

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

示例：

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

Copy after login

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!