Home > Article > Web Front-end > Detailed explanation of commonly used DOM methods in js

Detailed explanation of commonly used DOM methods in js

高洛峰Original: 2017-02-06 09:16:061487browse

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>

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 (60ccbe8a8efcfbc55280f0c205a9992b ). 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 [ 39ae2a42268023ea5ca018cf390b60c5, b39175b47eb4f25ca688689d3f990331 ] in total. One starts with # to represent the id, and the other starts with . to represent the Class name.

　3. Continue contentTag[0] Output60ccbe8a8efcfbc55280f0c205a9992b

contentTag[ 1] Output7f29bff5ebaec2b2412c08e2a48f6eff

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 [ b39175b47eb4f25ca688689d3f990331 ] Return a An array of element objects, even if there is only one.

　 3. contentClass[0] output7f29bff5ebaec2b2412c08e2a48f6eff

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, e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 When encountering block elements, there will be There is a newline character 0c6dc11e160d3b678d68754cc175188a, 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 39ae2a42268023ea5ca018cf390b60c5?

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!

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：JavaScript object-oriented essentialsNext article：JavaScript object-oriented essentials

See more

Detailed explanation of commonly used DOM methods in js

Related articles