Catalog

  • One 、 Operate by means of element type
    • id obtain getElementById
    • class obtain getElementsByClassName
    • Tag name acquisition getElementsByTagName
    • name Property acquisition getElementsByName
    • The selector takes an element querySelector
    • The selector takes a set of elements querySelectorAll
    • obtain html Methods document.documentElement
    • obtain body Methods document.body
    • summary :
    • Reference resources
  • Two 、 Choose according to the relationship tree ( Traversing the node tree )
  • 3、 ... and 、 Based on the traversal of the element node tree ( Traversing the element node tree )
  • Four 、 Get element content


One 、 Operate by means of element type

id obtain getElementById

<div id="box"></div>
<script>
    let box= document.getElementById("box");
</script>

class obtain getElementsByClassName

Be careful : What this method gets is a collection

<div class="box"></div>
<div class="box"></div>
<script>
    let boxCollection= document.getElementsByClassName("box");
    let box1 = boxList[0];
    let box2 = boxList[1];
</script>

Tag name acquisition getElementsByTagName

Be careful : What this method gets is a collection

<div id="box">
    <p> The paragraph 1</p>
    <p> The paragraph 2</p>
    <p> The paragraph 3</p>
    <p> The paragraph 4</p>
    <p> The paragraph 5</p>
    <p> The paragraph 6</p>
</div>
<script>
    let pCollection= document.getElementsByTagName("p");
</script>

name Property acquisition getElementsByName

Be careful : Only contains name Attribute elements ( Form Elements ) Can pass name Property acquisition

<div id="box">
    <input type="text" name="user" />
</div>
<script>
    let userInput= document.getElementsByName("user");
</script>

The selector takes an element querySelector

<div id="box"></div>
<script>
    let box= document.querySelector("#box");
</script>

The selector takes a set of elements querySelectorAll

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
    let box1= document.querySelector(".box");
    let boxes= document.querySelectorAll(".box");
</script>

The results are as follows :

Be careful :querySelector() and querySelectorAll() Method values in parentheses are selectors , But we can see from the picture that , There is a difference between the two methods . When there is more than one class The same element , Use querySelector() Method can only get the first class by box The elements of , and querySelectorAll() Got all of it class by box Element collection for .

obtain html Methods document.documentElement

document.documentElement It's about getting html This label's

obtain body Methods document.body

document.body It's about getting body This label's .

summary :

All access to DOM Object method , Only getElementById() and querySelector() These two methods directly return DOM Object itself , You can bind events directly to it .

getElementXXX Method of type , In addition to Id Get elements , Everything else returns a collection , If you need to get specific DOM Elements , It needs to be indexed , Such as :document.getElementsByClassName(“box”)[0] => obtain class by box The first of all the elements of DOM Elements .

querySelector() And querySelectorAll() The connection and difference between the two :
contact : Both values in brackets are selectors
difference : When there is more than one class The same element , Use querySelector() Method can only get the first class by box The elements of , and querySelectorAll() Got all of it class by box Element collection for .

Reference resources

Native js obtain DOM Several methods of object
js obtain DOM Several ways of nodes

Two 、 Choose according to the relationship tree ( Traversing the node tree )

parentNode// Gets the parent of the selected node , The top node is #document

childNodes // Get the children of the selected node

firstChild // Get the first child of the selected node

lastChild // Gets the last child of the selected node

nextSibling // Gets the next sibling of the selected node   Of the last node in the list nextSibling The property value is null

previousSibling // Get the previous node   Of the first node in the list previousSibling The property value is null

3、 ... and 、 Based on the traversal of the element node tree ( Traversing the element node tree )

parentElement // Returns the parent element node of the current element (IE9 The following are not compatible )

children  // Returns the child node of the current element

firstElementChild // What is returned is the first element child node (IE9 The following are not compatible )

lastElementChild  // Returns the last element child node (IE9 The following are not compatible )

nextElementSibling  // What is returned is the next sibling element node (IE9 The following are not compatible )

previousElementSibling  // Returns the previous sibling node (IE9 The following are not compatible )

Four 、 Get element content

innerHTML: You can set and get labels for elements + Text content (jq:html())

innerText: You can set and get the text content of an element (jq:text())

value: You can get the value value (jq:val())

setAttribute()
Set properties .setAttribute(" attribute "," value ")

getAttribute()
get attribute .getAttribute(" attribute ")

removeAttribute()
Delete attribute ,obj.removeAttribute(' Property name ')