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>
