一. DOM获取页面上的元素
<!-- DOM获取页面上的元素 -->
<div class="container">
<button id="btn">按钮1</button>
<button class="cls">按钮2</button>
<button class="cls">按钮3</button>
<button name="mybtn">按钮4</button>
<button name="mybtn">按钮5</button>
</div>
1. 根据 id 获取
var btnId = document.getElementById("btn");
btnId.style.backgroundColor = "red";
2. 根据 class 获取
var btnCls = document.getElementsByClassName('cls');
btnCls[0].style.backgroundColor = 'green';
btnCls[1].style.backgroundColor = 'green';
3. 根据 name 获取
var btnName = document.getElementsByName('mybtn');
btnName[0].style.backgroundColor = 'yellow';
btnName[1].style.backgroundColor = 'yellow';
4. 根据 标签名 获取
var btnTag = document.getElementsByTagName('button');
for (var i = 0; i < btnTag.length; i++) {
btnTag[i].style.backgroundColor = 'pink';
}
5. 根据 querySelector 获取
var btn = document.querySelector('#btn');
var cls = document.querySelector('.cls');
var myBtn= document.querySelector('button');
6. 根据 querySelectorAll 获取
var btns = document.querySelectorAll('div>button');
var myBtns= document.querySelectorAll('.cls');
var buttons= document.querySelectorAll('button');
二. DOM 树的组成
三. 节点
1. nodeType 查看节点的类型
- 元素节点 1
- 属性节点 2
- 文本节点 3
- 注释节点 8
<div class="box">一个盒子</div>
<script>
var oBox = document.querySelector('.box');
console.log(oBox.nodeType); // 1
console.log(oBox.attributes['class'].nodeType); // 2
console.log(oBox.childNodes[0].nodeType); // 3
</script>
2. nodeName 查看节点的名称
<div class="box">一个盒子</div>
<script>
console.log(oBox.nodeName); // DIV
</script>
3. nodeValue 查看节点的值
<div class="box">一个盒子</div>
<script>
console.log(oBox.childNodes[0].nodeValue); // 一个盒子
console.log(oBox.attributes['class'].nodeValue); // box
</script>
4. innerHTML 和 nodeValue的区别
- 取值的区别
- nodeValue 可以获取文本节点的内容和属性节点的值。
- innerHTML只能获取元素节点中的内容。
- 赋值的区别
- nodeValue 会把包含在文本里的HTML标签按原样输出。
- innerHTML 可以解析内部的HTML标签
四. 属性的操作
1. 固有属性
-
attributes 获取当前元素所有的属性
-
getAttribute("属性名称") 获取属性的值
-
setAttribute("属性名称", "属性的值") 设置属性
-
removeAttribute("属性名称") 删除属性
<div class="boxClass box" id="boxID">一个盒子 </div>
<script>
// (1) attributes
console.log(oBox.attributes); // 返回一个 NamedNodeMap 节点列表
console.log(oBox.attributes[1].nodeValue); // boxID
console.log(oBox.attributes.class.nodeValue); // boxClass box
// (2) getAttribute("属性名称")
console.log(oBox.getAttribute('id')); // boxID
// (3) setAttribute("属性名称", "属性的值")
oBox.setAttribute('title', 'hello');
// (4) removeAttribute("属性名称")
oBox.removeAttribute('title');
</script>
2. 状态属性
- checked, selected, disabled等ed结尾的属于状态属性
- 状态属性不能使用get/set/removeAttribute等属性
- 状态属性直接设置true/false
<input class="ipt" type="checkbox">
<script>
var oIpt = document.querySelector('.ipt');
// 1) 设置状态属性
oIpt.checked = true;
// 2) 获取状态属性
console.log(oIpt.checked); // true
// 3) 删除状态属性
oIpt.checked = false;
</script>
五. 父节点
1. parentNode
- 父节点, 顶级到document, 最终到null
2. parentElement
<html>
...
<body>
<div id="box">
<div id="inner"></div>
</div>
</body>
</html>
<script>
var oInner = document.querySelector('#inner');
// (1) parentNode
console.log(oInner.parentNode); // <div id="box">...<div>
console.log(oInner.parentNode.parentNode.parentNode.parentNode); // document
console.log(oInner.parentNode.parentNode.parentNode.parentNode.parentNode); // null
// (2) parentElement
console.log(oInner.parentElement); // <div id="box">...<div>
console.log(oInner.parentElement.parentElement.parentElement); // html
console.log(oInner.parentElement.parentElement.parentElement.parentElement); // null
</script>
六. 子节点
<!-- 子节点 -->
<ul class="list">
<li>li01</li>
<li>li02</li>
<li>li03</li>
<li>li04</li>
<li>li05</li>
</ul>
<script>
var oList = document.querySelector('.list');
<script>
1. childNodes
- 包含所有子元素节点和子文本节点
- 遵循w3c规范
- 注: 换行也算一个文本节点
console.log(oList.childNodes.length); // 11
// 清空文本节点,仅保留元素节点, 元素节点类型为 1
for (var i = 0; i < oList.childNodes.length; i++) {
if (oList.childNodes[i].nodeType === 1) {
listArr.push(oList.childNodes[i]);
}
}
console.log(listArr.length); // 5
2. children
- 所有元素子节点
- 在IE6,7,8下, 会把注释节点当做元素节点
console.log(oList.children.length); //5
3. firstChild, lastChild
- firstChild 第一个子元素节点
- lastChild, 最后一个子元素节点
- 包含元素节点和文本节点
- 在IE6,7,8下是元素节点, 在google下是undefined
- 注: 换行也算一个文本节点
console.log(oList.firstChild); // #text
console.log(oList.lastChild); // #text
4. firstElementChild, lastElementChild
- firstElementChild第一个子元素节点
- lastElementChild, 最后一个子元素节点
console.log(oList.firstElementChild.childNodes[0].nodeValue); // li01
console.log(oList.lastElementChild.childNodes[0].nodeValue); // li05
5. 兼容写法
- firstChild, firstElementChild
- lastChild, lastElementChild
var oFirst = oList.firstElementChild || oList.firstChild;
var oLast = oList.lastElementChild || oList.lastChild;
七. 兄弟节点
<ul class="list">
<li>li01</li>
<li>li02</li>
<li class="li3">li03</li>
<li>li04</li>
<li>li05</li>
</ul>
<script>
var oList = document.getElementsByClassName('list')[0];
var lis2 = oList.children[1];
</script>
1. nextSibling, previousSibling
- nextSibling 后一个兄弟节点
- previousSibling 前一个兄弟节点
- 包含元素节点和文本节点
- 注: 换行也算一个文本节点
// (1) nextSibling
console.log(lis2.nextSibling); // #text
// (2) previousSibling
console.log(lis2.previousSibling); // #text
2. nextElementSibling, previousElementSibling
- nextElementSibling 后一个兄弟节点
- previousElementSibling 前一个兄弟节点
- 只包含元素节点
// (1) nextElementSibling
console.log(lis2.nextElementSibling.childNodes[0].nodeValue); // li03
// (2) previousElementSibling
console.log(lis2.previousElementSibling.childNodes[0].nodeValue); // li01
3. 兼容写法
- nextSibling, nextElementSibling
- previousSibling, previousElementSibling
var oNext = lis2.nextElementSibling || lis2.nextSibling;
var oPre = lis2.previousElementSibling || lis2.previousSibling;
八. 节点的操作
1. 创建节点
- document.createElement() 创建元素节点
- document.createTextNode() 创建文本节点
- document.createComment() 创建注释节点
var oDiv = document.createElement('div'); //创建元素节点
var oTxt = document.createTextNode('我是创建的文本节点'); // 创建文本节点
var oCom = document.createComment('我是div的注释'); // 创建注释节点
2. 追加节点
- 父节点.appendChild(子节点)
document.body.appendChild(oDiv); // 往页面追元素节点
oDiv.appendChild(oCom); // 追加注释
oDiv.appendChild(oTxt); // 追加文本
3. 插入节点
- 父节点.insertBefore(新的节点, 参照节点) 插入节点
- insertBefore第二个参数如果为null,等价于往父元素最后插入一个新节点
// 在oLi4前插入新节点
oList.insertBefore(newLi, oLi4); // 在oLi4前插入newLi
4. 替换节点
- 父节点.replaceChild(新节点, 被替换的节点)
oList.replaceChild(newLi, oLi4); // 将oLi4替换为newLi
5. 删除节点
- 父节点.removeChild(子节点)
- 子节点.remove() 自杀式删除
oList.removeChild(oLi2); // 删除oList里面的oLi2节点
oLi1.remove(); // 删除oLi1节点
5. 克隆节点
- cloneNode() 默认false, 浅克隆
- cloneNode(false) 浅克隆, 默认, 只会克隆自身结构, 不会克隆子元素
- cloneNode(true) 深克隆, 会克隆自身结构, 还会克隆子元素
var newLi1 = oLi2.cloneNode(false); // 浅克隆
var newLi2 = oLi2.cloneNode(true); // 深克隆
