当前位置：网站首页>DOM operation -- get elements and nodes

DOM operation -- get elements and nodes

2022-07-25 02:49:00 【H5_ ljy】

List of articles

One 、 What is? DOM？
Two 、 How to get elements

One 、 What is? DOM？

DOM yes document object model It is W3C The browser developed by the industry alliance is right for programmers HTML Interface for document operation
It translates the code in the document into an object model
In this model All relevant tag attributes, annotation text, etc 12 All kinds of data are translated into one type of object Collectively, node objects .

Two 、 How to get elements

1. The method provided by the system

Method	describe
document.getElementById()	Through elements id To find the elements , Input “id name ”
document.getElementsByClassName()	Find elements by class name , Input " Class name "
document.getElementsByTagName()	Find elements by tag names , Input " Tag name "
document.getElementsByName()	adopt name Name to find the element , Input "name name "
document.querySelector()	Find matches specified CSS Selectors （id、 Class name 、 type 、 attribute 、 Attribute value and so on ） One of the first HTML Elements ;
document.querySelectorAll()	Find matches specified CSS Selectors （id、 Class name 、 type 、 attribute 、 Attribute value and so on ） All of the HTML Elements , Returns an array containing all the elements found

Return value ： see Element Did you add s, If yes, return an array containing all the elements found , If it is not found, an empty array is returned ; No addition s Then return the first element found , Otherwise null

    <div id="div_1" class="div1">
        <div class="div2"></div>
    </div>
    <div class="div1"></div>
    <input type="text" name="1">
    <input type="text" name="1">
    <script>
        console.log(document.getElementById('div_1'))
        console.log(document.getElementsByClassName('div1'))
        console.log(document.getElementsByTagName('div'))
        console.log(document.getElementsByName('1'))
        console.log(document.querySelector('div .div2'))
        console.log(document.querySelectorAll('div'))
        console.log(document.getElementById('div_3'),document.getElementsByClassName('div3'))
    </script>

Insert picture description here

2. Direct access provided by the system

Method	describe
document.anchors	Return ownership name All of properties <a> Elements .
document.body	return <body> Elements
document.documentElement	return <html> Elements
document.forms	Back to all <form> Elements
document.head	return <head> Elements
document.images	Back to all <img> Elements
document.inputEncoding	Return the encoding of the document （ Character set ）
document.lastModified	Return the date and time when the document was updated
document.links	Return ownership href All of properties <area> and <a> Elements
document.readyState	Return the （ load ） state
document.referrer	Returns the quoted URI（ Link documents ）
document.scripts	Back to all <script> Elements
document.title	return <title> Elements
document.URL	Return the integrity of the document URL

3. Get through relationship

Method	describe
parentElement	Returns the parent element of the node that called it
parentNode	Returns the parent node of the node that called it
children	Returns an array containing all child elements
childNodes	Returns an array containing all child nodes
nextSibling	Return to the next sibling
nextElementSibling	Return to the next sibling element
previousSibling	Return to the previous sibling node
previousElementSibling	Return to the previous sibling element

    <div id="div_1" class="div1">
        <div class="div2"></div>
    </div>
    <div id="div_2"></div>
    <div class="div1"></div>
    <script>
        console.log(document.getElementsByClassName('div2')[0].parentElement)
        console.log(document.getElementsByClassName('div2')[0].parentNode)
        console.log(document.getElementsByClassName('div2')[0].parentElement.parentElement.parentElement.parentElement)
        console.log(document.getElementsByClassName('div2')[0].parentNode.parentNode.parentNode.parentNode)
        console.log(document.getElementById('div_1').children)
        console.log(document.getElementById('div_1').childNodes)
        console.log(document.getElementById('div_2').nextSibling)
        console.log(document.getElementById('div_2').nextElementSibling)
        console.log(document.getElementById('div_2').previousSibling)
        console.log(document.getElementById('div_2').previousElementSibling)
    </script>

Insert picture description here

Add ：
The difference between elements and nodes ：
Elements ： namely html Inside the document , All tags can be called elements , for instance <div>、<p> etc. .
node ： stay HTML DOM （ Document object model ） in , Every part is a node ：
The document itself is a document node
all HTML An element is an element node
all HTML Attributes are attribute nodes
HTML The text within the element is a text node （ Including carriage return is also a text node ）
Annotations are annotation nodes .
Their relationship is ： Element is a kind of node , Called element nodes , But element nodes can contain many nodes .

parentElement and parentNode difference ::
The difference lies in html Labeled parentNode by document,parentElement There is no , return null;

4. Get how many child elements you are in the parent element / node

    <div id="div_1" class="div1">
        <div class="div2"></div>
    </div>
    <div id="div_2"></div>
    <div class="div1"></div>
    <script>
        Object.prototype.indexOf_1=function () {               
            let parentChildren=this.parentElement.children;  // Get the child elements of the caller's parent element  
            for(let i=0;i<parentChildren.length;i++){  // Loop the array returned in the previous step 
                if(parentChildren[i]==this){   // Determine which child element is the caller 
                    return i         // Returns the subscript of the caller in the child element set of the parent element 
                }
            }  
          }
        let div2=document.getElementById('div_2')
        console.log(div2.indexOf_1())

原网站

版权声明
本文为[H5_ ljy]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/202/202207200551385342.html