JavaScript DOM basic operations
1, Six ways to get elements
document.getElementById('id name') //Get by id name
document.getElementsByclassName('Element class name') //Get the return value according to the element class name: pseudo array
document.getElementsByTagName('Element class name') //Get the return value according to the element label: pseudo array
document.querySelector('selector') //Gets the first element from the selector
document.querySelectorAll('selector') //Get the return values of all elements according to the selector: pseudo array
2, Operation element content
1. Get element text content
Format:
Get content: element innrtText
Modified content: element innerText = "modified content"
//Click the div box to change the text inside
<div Style="background:red" id="JD">I'm old content</div>
//Get element (get content through tag selector)
var ele=document.querySelector('div')
//Get element (get element by id)
var btn=document.getElementById('JD')
//Get element text content and output
console.log(ele.innerText)
//Give div a click event (here, the div element obtained by id is used)
btn.onclick=function(){
//Reset the new content for the div
ele.innerText="I'm reborn"
}
2. Operation element hypertext content (modify code directly)
Format:
Get content: element innrtHTML
Modified content: element innerHTML = "new tag"
//Click the div box to change the div into a p tag
<div style="background:red" id="JD">I am div Box</div>
//Get element (get content through tag selector)
var ele=document.querySelector('div')
//Get element (get element by id)
var btn=document.getElementById('JD')
//Get the content in the label of the element and output it in the form of text
console.log(ele.innerHTML)
//Give div a click event (here is the div element obtained by id)
btn.onclick=function(){
//Turn the div box into a p tag
ele.innerHTML="<p>I became p The label is gone, whimpering!</p>"
}
3, Action element properties
1. Native attributes (type, id, src)
Format:
Get attribute: element Attribute name
Setting attributes: elements Property name = property value“
//Click the picture to change the picture background link to switch the background back and forth
//html
<img scr="../img/bg1.jpg" id="bg">
//JavaScript
//Get element (get element by id)
var btn=document.getElementById('bg')
//Get the path of the element scr and output it
console.log(btn.src)
var tes=0 //Control switched pictures
//Give img a click event (the IMG element obtained by id is used here)
btn.onclick=function(){
if(tes===0){
btn.src="../img/bg2.jpg"
tes=1
}else{
btn.src="../img/bg1.jpg"
tes=0
}
2. Define and operate custom attributes
(1) Define properties
Definition format: data-*
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div style="wight:500px;height:500px;background:black" data-a="p1" id="ab"> p1
<div style="wight:150px;height:150px;background:green" data-a="p2">p2</div>
<div style="wight:150px;height:150px;background:blue" data-a="p3">p3</div>
</div>
<script>
//Get parent div element
var divab=document.getElementById("ab")
//The event of clicking the child element and the parent element will also be triggered
divab.onclick=function(e){
//Use custom attributes to determine whether the point is a child element or a parent element.
if(e.target.dataset.a==="p1"){
console.log("p1")
}
if(e.target.dataset.a==="p2"){
console.log("p2")
}
if(e.target.dataset.a==="p3"){
console.log("p3")
}
}
</script>
</body>
</html>
(2) Action custom properties
Action custom attribute format:
Get attribute: element getAttribute("attribute name")
Setting attributes: elements setAttribute("attribute name", "attribute value")
Deleting attributes: elements removeAttribute("attribute name")
//html
<div id="tes" data-cs="Hello Wrold">Custom attribute test</div>
//JavaScript
//Get element
var ter=document.getElmentById("tes")
//Get custom properties and output
console.log(ter.getAttribute(CS))
//Reassign custom attribute CS
ter.setAttribute("CS","Hello man")
//Delete custom attribute
ter.removeAttribute("CS")
4, Operation element class name
Format:
Get class name: element className
Set class name: element className = "new class name"
//Click the div box and change the background color
//Set the class name to change the background color of div
.divBgRed{
background:red;
}
.divBgBlue{
background:blue;
}
<div class="divBgRed" id="divid">I am a box that can change color</div>
//Gets the element of the div
var divid=document.getElementById("divid")
divid.onclick=function(){
divid.className="divBgBlue"
}
5, Action element inline style
Format:
Get inline style: element style . Style name
Set inline style: element style. Style name = "style value"
//Exporting and modifying inline styles
<div style="background-color:red;width=100px" id="divid">I'm red div Box</div>
var tre=document.getElementById("divid")
console.log(tre.style.backgroundColor) //When there is a dash in the line style, remove the dash and turn it into hump writing
tre.onclick=function(){
tre.style.background="blue"
tre.style.width="500px"
}
6, Get non inline style
Format: window Getcomputedstyle (element) Style name
Note: both inline styles and non inline styles can be obtained
7, Node action (label)
1. Create node (label)
Format: document CreateElement ("tag name")
var div=document.creatElement("div")
var p=document.creartElement("p")
2. Insert node (label)
Format:
**The element of the parent node AppendChild (child node) * * / / inserted last by default
Parent node element InsertBefore (the node to be inserted, which is in front of your node)
<<body>
<div>
<span>I am span label</span>
<ul>I am ul label</ul>
</div>
<script>
//Question 1: insert the li tag at the last position in the ul tag
//Gets the element of the ul tag
var ul=document.querySelector("ul")
//Create li label
var li=document.createElement("li")
//Insert li tag in ul tag
ul.appendChild(li)
//Question 2: insert a p tag before the span tag in div
//Get div parent element
var div=document.querySelector("div")
//Gets the element of the next label at the location to insert
var span=document.querySelector("span")
//Create a p label to insert
var p=document.createElement("p")
//Insert the p label in the appropriate position
div.insertBefore(p,span)
</script>
</body>
3. Delete node (label)
Format:
Parent node element Removechild (child node)
You want to delete a node element remove()
<body>
<div>
<span>label</span>
</div>
</body>
<script>
//Gets the element of the parent tag
var div=document.querySelector("div")
//Delete span label
div.removeChild(span)
//Gets the element to delete the span tag
var span=ocument.querySelector("span")
//Delete span label
span.remove()
</script>
4. Replace node (label)
Format:
Parent node element Replacechild (replace node, replace node)
<body>
<div>
<span>label</span>
</div>
</body>
<script>
//Gets the parent element of the span tag
var div=document.querySelector("div")
//Create p label
var p=document.creartElement("p")
//Gets the element of the span tag
var span=document.querySelector("span")
//Replace the span tag with the p tag, and the contents remain unchanged
div.replaceChild(p,span)
</script>
5. Clone node (label)
Note: to copy the desired label, you need to insert the label in combination to be useful (compared with copying and pasting)
Format:
You want to clone the element of the tag CloneNode (clone descendant node or not)
//Problem: make a copy of the div tag and copy the child elements inside
<body>
<div>
<span>label</span>
</div>
</body>
<script>
//Gets the element of the div tag
var div=document.querySelector("div")
//Clone the div tag and clone its child elements
var cle=div.cloneNode(true)
//Insert the copied div tag after the original Div
//Gets the element of the body tag
var body=document.querySelector("body")
//Insert div tag
body.appendChild(cle)
</script>