1、获取元素
getElementById(); 返回类型为element
getElementByTagName(); 返回类型为集合
getElementByClassName(); 返回类型为集合
querySelector(); 通过id或者类获取第一个符合条件的元素，返回值为element
querySelectorAll(); 通过id或者类获取所有符合条件的元素，返回值为NodeList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app1">
<span class="item1">aaa</span>
<span class="item1">bbb</span>
<span class="item1">ccc</span>
</div>
<div id="app2">
<span class="item2">ddd</span>
<span class="item2">eee</span>
<span class="item2">fff</span>
</div>
</body>
<script>
var oDiv1 = document.getElementById('app1');
console.log(oDiv1);
var oDiv2 = document.getElementsByTagName('div');
console.log(oDiv2);
var oDiv3 = document.getElementsByClassName('item1');
console.log(oDiv3);
var oDiv4 = document.querySelector('#app1');
console.log(oDiv4);
var oDiv5 = document.querySelector('.item1');
console.log(oDiv5);
var oDiv6 = document.querySelectorAll('#app1');
console.log(oDiv6);
var oDiv7 = document.querySelectorAll('.item1');
console.log(oDiv7);
</script>
</html>
note：
querySelector()、querySelectorAll()参数需要加'#'或者'.'，否则会返回null。
2、获取父元素 parentNode
比如获取<span class="item1">aaa</span>的父元素：
<script>
var oSpan = document.getElementsByClassName('item1')[0];
var oDiv = oSpan.parentNode;
console.log(oDiv);
</script>
3、获取子元素 childNodes 返回一个nodelist 包括空白部分text
<script>
var oDiv1 = document.getElementById('app1');
var child = oDiv1.childNodes;
console.log(child);
</script>
4、firstChild 获取到的节点包括空白部分text
<script>
var oDiv1 = document.getElementById('app1');
var child = oDiv1.firstChild;
console.log(child);
</script>
5、firstElementChild 获取第一个元素element
<script>
var oDiv1 = document.getElementById('app1');
var child = oDiv1.firstElementChild;
console.log(child);
</script>
6、获取下一个兄弟 区别nextSibling和nextElementSibling
<script>
var oSpan = document.getElementsByClassName('item1')[1];
var child = oSpan.nextSibling;
var child1 = oSpan.nextElementSibling;
console.log(child);
console.log(child1);
</script>
nextSibling包括空白部分，nextElementSibling获取到的是第一个元素。
7、获取前一个兄弟 previousSibling previousElementSibling 区别同上
8、创建元素 createElement
<script>
var oDiv = document.createElement('div');
document.body.appendChild(oDiv);
console.log(document.body);
</script>
note：appendChild为尾插
<script>
var app1 = document.getElementById('app1');
var oDiv = document.createElement('div');
document.body.insertBefore(oDiv,app1);
console.log(document.body);
</script>
note：insertBefore('新创建的元素',‘要插到的某个元素的前面’);
9、遍历删除元素
<script>
var app1 = document.getElementById('app1');
while(document.body.firstElementChild){
document.body.removeChild(document.body.firstElementChild)
}
console.log(document.body);
</script>
注意appendChild();是将一个child元素添加到另一个元素的尾部，并删除它原来所在的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app1">
<span class="item1">aaa</span>
<span class="item1">bbb</span>
<span class="item1">ccc</span>
</div>
<div id="app2">
<span class="item2">ddd</span>
<span class="item2">eee</span>
<span class="item2">fff</span>
</div>
</body>
<script>
let oDiv1 = document.getElementById('app1');
let oDiv2 = document.getElementById('app2');
while(oDiv1.firstElementChild){
oDiv2.appendChild(oDiv1.firstElementChild);
}
</script>
</html>
10、设置样式
oDiv.style.color = 'red';11、设置属性
oDiv.setAttribute('type','button'); 12、innerHtml和outerHtml、innerText、textContent的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>come on</h1>
</div>
</body>
<script>
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv.innerHTML);
console.log(oDiv.outerHTML);
console.log(oDiv.innerText);
console.log(oDiv.textContent);
</script>
</html>
innerHtml：获取元素里面的HTML标签和text内容。
outerHtml：获取元素本身和里面的HTML标签和text内容。
innerText：获取元素里面的text文本。
textContent：获取元素里面的text文本（包括空白部分）。
