js基礎知識
獲取DOM的方式及 節點的操作
獲取DOM的方式
1.document.documentElement
獲取HTML
2.document.head
獲取head
3.document.body
獲取body
4.document.getElementById()
在document上下文中獲取元素（通過Id獲取的元素是一個元素對象，獲取不到就是null）
5.context.getElementsByTagName(‘標籤名’)
在指定的標籤中（此處指定的標籤爲，context代表的標籤）通過標籤名獲取元素，獲取的是一個元素集合，如果沒有獲取到元素,那就是空元素集合
6.context.getElementsByClassName(‘類名’)
在指定的上下文中通過class名獲取元素，獲取的是一個元素集合，如果沒有獲取到元素,那就是空元素集合【在IE6~8下不兼容】
7.context.querySelector()
在指定上下文中通過選擇器獲取第一個元素, 獲取不到就是null【在IE6~8下不兼容】
8.context.querySelectorAll()
在指定上下文中通過選擇器獲取一組元素集合，獲取不到就是空元素集合【在IE6~8下不兼容】
代碼
let box1 = document.getElementById('box');
let box2 = document.getElementsByTagName('div')[0];
let box3 = document.getElementsByClassName('box')[0];
let box4 = document.querySelector('#box');
let box5 = document.querySelectorAll('#box')[0];
例子
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>獲取dom的方式</title>
</head>
<body>
<div id="box">
<ul id="navList">
<li class="aaa">我是第1個li</li>
<li>我是第2個li</li>
<li>我是第3個li</li>
</ul>
<div>
<b>111</b>
</div>
<div>
<span>222</span>
</div>
<div>
<p>333</p>
</div>
<li class="aaa">我是第4個li</li>
</div>
<script>
/*
1、 document.getElementById():在document上下文中獲取元素（通過Id獲取的元素是一個元素對象，獲取不到就是null）
2、context.getElementsByTagName('標籤名')：在指定的上下文中通過標籤名獲取元素，獲取的是一個元素集合，如果沒有獲取到元素,那就是空元素集合
3、context.getElementsByClassName('')：在指定的上下文中通過class名獲取元素，獲取的是一個元素集合，如果沒有獲取到元素,那就是空元素集合【在IE6~8下不兼容】
4、document.body/document.head/document.documentElement（獲取body、頭部、html）
5、context.querySelector() : 在指定上下文中通過選擇器獲取第一個元素, 獲取不到就是null【在IE6~8下不兼容】
6、context.querySelectorAll():在指定上下文中通過選擇器獲取一組元素集合，獲取不到就是空元素集合【在IE6~8下不兼容】
*/
// 獲取元素
// let nav = document.getElementById('navList');
// 1、let box = document.getElementById('box');
// 通過Id獲取的元素是一個元素對象，獲取不到就是null
let lists = nav.getElementsByTagName('i');
// context.getElementsByTagName('標籤名')// 通過指定的上下文獲取指定的標籤，獲取的是一個元素集合，如果沒有獲取到元素,那就是空元素集合
// console.log(lists)
// 2、context.getElementsByClassName()
let box = document.getElementById('navList');
let list = document.getElementsByClassName('a');
console.log(list)
// 3、document.body/document.head/document.documentElement
console.log(document.body) // 獲取body
console.log(document.head) // 獲取頭部
console.log(document.documentElement) // 獲取html
// 5、context.querySelector
let box = document.getElementById('box')
let ss = box.querySelector('#navList .a');
// 在指定上下文中通過選擇器獲取第一個元素, 獲取不到就是null
console.log(ss)
// 6、context.querySelectorAll()
// 在指定上下文中通過選擇器獲取一組元素集合，獲取不到就是空元素集合
let list = document.querySelectorAll('#navList li:nth-child(2)'); // 獲取的是一個元素集合，獲取不到就是空元素集合
console.log(list)
console.log(box)
</script>
</body>
</html>
節點的操作
節點（node）概念
頁面中所有的東西都是節點，所有的節點都是對象
| 節點名 | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素節點 | 1 | 大寫的標籤名 | null |
| 文本節點 | 3 | ‘#text’ | 文本的內容、空格、回車（換行） |
| 註釋節點 | 8 | ‘#comment’ | 註釋的內容 |
| 文檔節點 | 9 | ‘#document’ | null |
四種節點詳解
元素節點
頁面中的標籤
文本節點
包括內容、空格、回車（換行）
註釋節點
寫的註釋
文檔節點
整個頁面，整個文檔
操作節點的屬性
子節點
childNodes
獲取所有子節點
firstChild
獲取第一個子節點
lastChild
獲取最後一個子節點
previousSibling
獲取上一個哥哥節點
nextSibling
獲取下一個兄弟節點
元素子節點【在IE6~8下不兼容】
children
獲取所有的元素子節點
firstElementChild
獲取第一個元素子節點
lastElementChild
獲取最後一個元素子節點
previousElementSibling
獲取上一個哥哥元素節點
nextElementSibling
獲取下一個兄弟元素節點
父節點
parentNode
獲取指定元素的父節點
// 元素節點就是頁面中的標籤
// 文本節點包括內容、空格、回車（換行）
// 註釋節點就是你寫的註釋
// 文檔節點就是整個大文檔（頁面）
var box = document.getElementById('box');
var three = document.getElementById('three')
// console.log(box.childNodes)
// 操作節點的屬性
/*
childNodes:獲取的所有的子節點
children:獲取所有的元素子節點【在IE6~8下不兼容】
firstChild: 獲取第一個子節點
firstElementChild: 獲取第一個元素子節點【在IE6~8下不兼容】
lastChild:獲取最後一個子節點
lastElementChild：獲取最後一個元素子節點【在IE6~8下不兼容】
previousSibling: 獲取上一個哥哥節點
previousElementSibling:獲取上一個哥哥元素節點【在IE6~8下不兼容】
parentNode
*/
// childNodes:獲取的所有的子節點
// children:獲取所有的元素子節點
console.log(box.childNodes.length);
console.log(box.children.length); // [在IE6~8下不兼容]
// 封裝一個children
function children(context){
var child = context.childNodes;// 獲取元素的所有子節點
var ary = []; // 創建一個新數組，用來存放元素子節點
// 循環每一個子節點
for (var i = 0; i < child.length; i++) {
// 如果子節點的nodeType的值爲1，那就說明該子節點是元素子節點
// if(child[i].nodeType === 1){
// // 把元素子節點push到新數組中
// ary.push(child[i])
// }
child[i].nodeType === 1?ary.push(child[i]):null;
}
return ary
}
console.log(children(box).length)
//================================
// box.firstChild // 獲取第一個子節點
// box.firstElementChild // 獲取第一個元素子節點【在IE6~8下不兼容】
// console.log(box.firstChild)
// console.log(box.firstElementChild)
// box.lastChild
// box.lastElementChild【在IE6~8下不兼容】
// console.log(box.lastChild)
// console.log(box.lastElementChild)
// =================================
// three.previousSibling: 獲取上一個哥哥節點
// three.previousElementSibling:獲取上一個哥哥元素節點
// console.log(three.previousSibling)
// console.log(three.previousElementSibling)
/*
<div id="box">
<!-- 西遊記 -->
<li>孫悟空</li>
<li>豬八戒</li> <!-- 西遊記 -->
<li id="three">沙悟淨</li>
</div>
*/
function prev(context){
var pre = context.previousSibling;
// if(pre === null){
// return pre
// }
while(pre.nodeType !==1){
pre = pre.previousSibling
}
return pre
}
console.log(prev(three)) // null
// console.log(one.previousSibling)
</script>
</body>
</html>
JS節點的動態增刪改
增：createElement()
創建元素節點
增：createTextNode()
創建文本節點
增：容器.appendChild(節點)
把節點插入到容器的末尾
增：容器.insertBefore(新節點, 老節點)
把節點插入到老節點的前面
刪：容器.removeChild(節點)
移除容器中的節點
克隆：容器.cloneNode()
容器.cloneNode(true)
深克隆，完美復刻。
容器.cloneNode(false) 容器.cloneNode()
淺克隆，只克隆標籤
js節點的動態增刪改
createElement:創建元素節點
createTextNode:創建文本節點
容器.appendChild(節點)：把節點插入到容器的末尾
容器.insertBefore(新節點, 老節點)：把節點插入到老節點的前面
容器.removeChild(節點)：移除容器中的節點
let box = document.createElement('div'); // 動態創建一個元素節點
let one = document.getElementById('one');
box.style.width = '200px';
box.style.height = '200px';
box.id="box";
box.className = 'box';
let text = document.createTextNode('123455');// 動態創建一個文本節點
box.appendChild(text); // 把文本節點插入到元素節的末尾
// document.body.appendChild(box) // 把box插入到元素的末尾
document.body.insertBefore(box, one) // 把box插入到one的前面
// document.body.removeChild(one) // 移除節點
console.dir(text)
console.log(box)
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 20px auto;
font-size: 30px;
color: white;
background: red;;
}
</style>
</head>
<body>
<div class="box"><span>111</span></div>
<script>
/*
節點.cloneNode(true/false);克隆節點，如果傳參是true就是深克隆，如果不傳參或者傳false就是淺克隆（只複製外層元素，不復制裏邊的內容）
*/
let one = document.getElementsByClassName('box')[0];
let clone1 = one.cloneNode(); // 如果不傳參，就是淺克隆
let clone2 = one.cloneNode(true); // 深克隆
let clone3 = one.cloneNode(false); // 如果不傳參，就是淺克隆
clone1.innerHTML = '<span>222</span>'; // 修改clone1的內容
clone2.children[0].innerText = '333'; // 修改clone2裏的span元素的內容
document.body.appendChild(clone1); // 把clone1插入到body的末尾
document.body.appendChild(clone2)// 把clone2插入到body的末尾
console.log(clone1, clone2, clone3)
</script>
JS創建、獲取、移除屬性
setAttribute(‘屬性名’,屬性值)；
在元素結構中設置屬性
getAttribute(‘屬性名’)
在元素結構中獲取屬性
removeAttribute(‘屬性名’);
在元素結構中移除屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<script>
/*
setAttribute('屬性名',屬性值)； 在元素結構中設置屬性
getAttribute('屬性名') 在元素結構中獲取屬性
removeAttribute('屬性名'); 在元素結構中移除屬性
*/
let btns = document.querySelectorAll('button');
console.log(btns)
// for (var i = 0; i < btns.length; i++) {
// // 把屬性存儲到元素的堆地址中
// btns[i].myIndex = i;
// btns[i].onclick = function(){
// // 在相應的元素的堆地址中獲得屬性名所對應的屬性值
// alert(this.myIndex)
// }
// }
//這兩種方式不能混淆
for (var i = 0; i < btns.length; i++) {
// 把屬性存儲到元素的結構中，在元素的行內可以看到
btns[i].setAttribute('data-index',i);
btns[i].removeAttribute('data-index');
btns[i].onclick = function(){
// 獲取結構中的屬性
alert(this.getAttribute('data-index'))
}
}
console.log(btns)
</script>
</body>
</html>