Detailed explanation of commonly used DOM methods in js-JS Tutorial-php.cn

Detailed explanation of commonly used DOM methods in js

高洛峰

Release： 2017-02-06 09:16:06

Original

1622 people have browsed it

Introducing several common methods of js DOM

Get element nodes getElementById getElementsByTagName getElementsByClassName

First write a simple web page for testing:

/*
　　test.html
*/
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>test</title>
</head>
<body>
 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">这段的id是contentId。</p>
 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">这段的class name是contentClass。</p>
</body>
</html>

Copy after login

1. getElementById

1. First define the variable var contentId = document.getElementById("contentId");

2. Then output the object contentId and return the element object with the id contentId (

). See the picture below:

js常用DOM方法详解

2. getElementsByTagName

1. Define the variable first var contentTag = document.getElementsByTagName("p");

　2. Then I output the contentTag, which returns two HTMLCollection [ , ] in total. One starts with # to represent the id, and the other starts with . to represent the Class name.

　3. Continue contentTag[0] Output

contentTag[ 1] Output

js常用DOM方法详解

##From this we can see getElementsByTagName What is returned is an array!

3. getElementsByClassName

1. var contentClass = document.getElementsByClassName("contentClass");

2. contentClass output HTMLCollection [ ] Return a An array of element objects, even if there is only one.

　 3. contentClass[0] output

js常用DOM方法详解

We also commonly use getAttribute, setAttribute, ChildNodes, nodeType, nodeValue, firstChild, and lastChild methods to obtain some information.

4. Use getAttribute and setAttribute to get and set attributes respectively:

js常用DOM方法详解 ##After changing the style attribute:

js常用DOM方法详解 5. Then this is childNOdes:

##That is to say,

When encountering block elements, there will be There is a newline character
, and the browser will treat it as a text node when looking for child nodes. It can also be seen from the figure that childNodes also returns an array. js常用DOM方法详解

What if it is ?

There are 12 types of nodeType values, and there are three commonly used ones: 1 represents element node, 2 represents attribute node, and 3 represents text node. js常用DOM方法详解

nodeValue can not only get the value of the text node, but also change the value of the text node.

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website! js常用DOM方法详解

For more detailed explanations of commonly used DOM methods in js, please pay attention to the PHP Chinese website!