当前位置:网站首页>DOM operation

DOM operation

2022-07-06 19:36:00 wangatong

use Id

var a = document.getElementById("id  name ")

use class What you get is an array

var a = documen.getElementsByClassName("class  name ")

What you get with the tag is an array

var a = document.getElementsByTagName (" Tag name ")

use name What you get is an array

var a = document.getElementsByName( "name name " )

With selector querySelectorAll

document.querySelector("p");

event
onmouseover,onmouseout,onclick,
Modify the style
a.style.
Document: The root node
parentNode: Get parent node
childNodes: Get all children
firstChild: First child node
lastChild: The last child node

<p id="p1" class="p1"> Click on </p>
  <div id="div1"></div>
  <script>
    // let p = document.getElementById('p1')              //id
    // let p = document.querySelector("#p1")
    // let p = document.querySelectorAll("#p1")[0]
    // let p = document.getElementsByTagName("p")[0]      // label 
    let p = document.getElementsByClassName('p1')[0]      //class class 
    p.onclick = function(){
      console.log(111)
    }
    p.onmouseover = function(){
      console.log(222)
    }
    p.onmouseout = function(){
      console.log(333)
    }
    let div = document.createElement("p")             // Create element node 
    let content = "dfsfsdfsf"
    let txt = document.createTextNode(content)        // Create text node 
    div.appendChild(txt)                              // Add child nodes 
    let div1 = document.getElementById("div1")
    div1.appendChild(div)
    // div1.removeChild(div)                          // Remove node 
    let val = div.parentNode.getAttribute("id")       // Get parent node , Get attribute value     
    // alert(val)
    div.parentNode.setAttribute("name","12")          // Set properties 
    // prompt("What's your name?", "Default")
    // var re = confirm(" Delete ?");
    
    // if(re == false){
    //     console.log('false')
    // }else{
    //     console.log('true')
    // }
    console.log(navigator.language)
    console.log(document.title)
    console.log(document.head)
  </script>
原网站

版权声明
本文为[wangatong]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/187/202207061134570883.html