1. Get page elements
- getElementById(): Get the element based on the id attribute
- getElementsByTagName(): Get elements based on tag names
- getElementsByName(): Get elements based on name attribute
- getElementsByClassName(): Get elements based on class name
- querySelector(): Get the first matched element
- querySelectorAll(): Get all matching elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<li>苹果</li>
<li id="niu">香蕉</li>
<li id="niu">牛奶</li>
<p id="ge">这是一个水果</p>
<div>
<input type="checkbox" name="col">红色<br/>
<input type="checkbox" name="coll">白色<br/>
<input type="checkbox" name="collor" class="hei">绿色<br/>
<input type="checkbox" name="color" class="hei">黑色<br/>
</div>
<script>
var niu = document.getElementById("niu")
console.log(niu)
var ge = document.getElementsByTagName('p')
console.log(ge)
var col = document.getElementsByName('col')
col[0].checked = true
var chev = document.getElementsByClassName('hei')
chev[0].checked = true
console.log(chev)
for(var i = 0;i<chev.length;i++){
console.log(chev[i])
}
var li = document.querySelrctor('li')
console.log(li)
//id标签前面加#，class标签前面加.
var id = document.querySelector('#niu')
console.log('id')
var lis = document.querySelectorAll('li')
console.log(lis)
</script>
</body>
</html> 
2. Manipulate element content
- innerHTML: used to return or set all the content between the opening and closing tags of the element, including html tags
- innerText: Returns or sets the plain text content between the start and end tags of the element, excluding html tags
- textContent: used to return or set the text content of the specified node while retaining spaces and newlines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<li>西瓜</li>
<li>香蕉</li>
<li id="bai"><span>白菜</span></li>
<li>菠萝</li>
<li id="s"><span> 888 </span></li>
<script>
// 获取元素
var id = document.getElementById('bai')
var html = id.innerHTML
var text = id.innerText
console.log(html)
console.log(text)
var s = document.getElementById('s')
var spantext = s.textContent
console.log(spantext)
</script>
</body>
</html>
3. Manipulate element attributes
Set property value
- Set built-in property values
element.Attribute = 'value'
- Set custom property values
There are two main ways to assign values to custom attributes of elements. The syntax format is as follows:
element.setAttribute('Attribute', 'Value') element.dataset.Attribute = 'Value'
Get attribute value
- Get built-in property value
There are two main ways to get the built-in attribute value of an element. The syntax format is as follows:
element.
- Get custom attribute value
There are two main ways to get the custom attribute value of an element. The syntax format is as follows:
element.getAttribute('Attribute') element.dataset.Attribute or: element.dataset['Attribute']
Remove attribute
To remove attributes of an element, use the removeAttribute() method. The syntax format is as follows: element.removeAttribute('Attribute')
4. Manipulate element styles
Manipulate style object properties
You can return or set the element style by operating the style object attribute. The syntax format is as follows:
Element.style.Style attribute name [= 'Style value']
The syntax for deleting element styles is as follows:
Element.style.Style attribute name = ''
Manipulate className attribute
You can also return or set the element style by operating the class name. The syntax format is as follows:
element.className [= 'Class Name']
The syntax for deleting element styles is as follows:
element.className = ''
5.Node operation
Get node
Find common properties of element nodes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Datal1</td>
<td>Datal2</td>
<td>Datal3</td>
</tr>
<tr>
<td>Datal4</td>
<td>Datal5</td>
<td>Datal6</td>
</tr>
<tr>
<td>Datal7</td>
<td>Datal8</td>
<td>Datal9</td>
</tr>
</table>
<script>
window.onload = function(){
var myTd = document.getElementsByTagName("td")
// 遍历td
for(var i = 0;i<myTd.length;i++){
myTd[1].onclick = function(){
var mypd = this.parentNode
mypd.style.backgroundColor = 'red'
}
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="myid">
<div>第一个元素</div>
<div>第二个元素</div>
<div>第三个元素</div>
</div>
<script>
window.onload = function(){
var myid = document.getElementById('myid').children
for(var i = 0;i < myid.length;i++){
myid[i].style.backgroundColor = "red"
}
}
</script>
</body>
</html>Node append
Node appending includes creating and adding nodes. The commonly used node appending methods in web pages are shown in the table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1">
<p id="p1">这是第一个段落</p>
<p id="p2">这是第二个段落</p>
<button onclick="myfunction()">创建新段落</button>
</div>
<script>
function myfunction(){
var newp = document.createElement("p")
var text = document.createTextNode("这是一个新段落")
// 将新文本插入新段落
newp.appendChild(text)
var div = document.getElementById("div1")
// 将新的p元素插入div
div.appendChild(newp)
}
</script>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1">
<p id="p1">这是第一个段落</p>
<p id="p2">这是第二个段落</p>
<button onclick="myfunction()">创建新段落</button>
</div>
<script>
function myfunction(){
var newp = document.createElement("p")
var text = document.createTextNode("这是一个新段落")
newp.appendChild(text)
var div = document.getElementById("div1")
var p2 = document.getElementById("p2")
// 将新的p元素插入到第二段前面
div.insertBefore(newp,p2)
}
</script>
</body>
</html>
Node deletion
Syntax: parent.removeChild(thisNode)
Parameter Description:
thisNode Current node, the node to be deleted
parent The parent node of the current node, that is, thisNode.parentNode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>白菜</li>
<li>菠萝</li>
<li>茄子</li>
</ul>
<button onclick="myfunction()">删除最后一个列表项</button>
<script>
function myfunction(){
var list = document.getElementById("list")
list.removeChild(list.lastElementChild)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>白菜</li>
<li>菠萝</li>
<li>茄子</li>
</ul>
<button onclick="myfunction()">删除最后一个列表项</button>
<script>
function myfunction(){
var list = document.getElementById("list")
// 点击“删除”按钮，删除所有列表项
document.body.removeChild(list)
}
</script>
</body>
</html>