一、DOM节点的获取
1.DOM介绍(节点的介绍)
Web浏览器在解析页面的时候,会将页面描绘为一个倒立的树状结构(DOM树), DOM树由节点构成
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
2.节点的种类:元素节点(标签) 属性节点 文本节点 注释节点…
属性节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3(文本节点包括文字、空格、换行等)
实际开发中,节点操作主要操作的是元素节点
3.节点之间的关系:父子 兄弟 父节点 子节点 兄弟节点
利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
4.节点查找:
(1)父节点:
- 子节点.parentNode
返回的是某节点的父节点,返回的是最近的一个父节点
没有指定的父节点返回null
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>
(2)子节点:
- 节点.childNodes (所有子节点)
返回一个包含元素节点和文本节点的集合- 父节点.children (子元素节点)
只返回子元素节点
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// DOM 提供的方法(API)获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
</script>
5.节点对象的属性
nodeValue 节点值(一般用于获取文本节点的值,元素节点返回null)
nodeType 节点类型 1(元素节点) 2(属性节点) 3(文本节点)
nodeName 节点名称(文本节点没有节点名称)
6.其它节点属性
firstChild 第一个子节点,找不到返回null,同样包含所有的节点
lastChild 最后一个子节点,找不到返回null,同样包含所有的节点
firstElementChild 返回第一个元素子节点 找不到返回null
lastElementChild 返回第一个元素子节点 找不到返回null
注意:上两个方法有兼容性问题,IE9以上才支持
nextSibling 紧邻着的下一个兄弟节点,找不到返回null,同样包含所有的节点
previousSibling 紧邻的上一个兄弟节点,找不到返回null,同样包含所有的节点
nextElementSibling 返回当前元素的下一个兄弟元素节点,找不到返回null
previousElementSibling 返回当前元素的上一个兄弟节点,找不回返回null
实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和
lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
解决方案:
1.如果想要获取第一个子元素节点,使用parentNode.children[0];
2.如果想要获取最后一个子元素节点,
使用parentNode.children[parentNode.children.length - 1];
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
问:如何解决关于nextElementSibling兼容性问题?
答:自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
二、DOM的操作
操作DOM无非就是增删改查
关于查上面已经说过了
1.创建节点
- createElement() 创建元素节点
- createTextNode() 创建文本节点 innerHTML innerText
2.插入节点
1.appendChild() 在父节点中追加子节点
2.insertBefore(newNode,oldNode) 在指定节点前,插入子节点
3.删除节点
1.removeChild() 删除子节点,返回删除的节点。
2.remove() 删除节点自身(兼容性)
4.替换节点
replaceChild(newNode,oldNode) 替换指定子节点
5.复制节点
cloneNode(flag) flag 默认为false(不复制子节点) true(复制子节点)也称深拷贝
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
6.节点查询
A.documen.getElementById(id) 节点对象 如果没有返回null
B.document.getElementsByClassName 集合(类数组,伪数组)
C.getElementsByTagName(tagName) 集合
- document 调用 在全文中查找
- node调用,在指定节点下再查找
D. document.getLElementsByName() 集合
E. document.querySelector(selector) 根据选择器查找元素 (注意兼容性) 注意:该方法,只取第一个节点
F.document.querySelectorAll(selector) 根据选择器找元素 ,返回值为集合
7.样式操作
赋值: 节点.style.样式名=值;
取值:
1)节点.style.样式名 只能获取行内样式
2)getComputedStyle(节点,null) 既能取行内又能取样式表
IE低版本使用 currentStyle
8.属性操作
取值:
节点.属性名
- 节点[属性名]
- 节点.getAttribute(属性名)
赋值:
- 节点.属性名
- 节点[属性名]
- 节点.setAttribute(属性名,属性值);
注意:在属性和样式操作中,名称的变形 background-color —>backgroundColor
class—>className 等 但是,若使用getAttribute和setAttribute则不需要对属性进行变形
例如:img.getAttribute(‘class’);
三、表格
属性:
caption
tBodies
tHead
tFoot
rows 行
cells 列
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
// 2. 往tbody 里面创建行: 有几个人(通过数组的长度)我们就创建几行
var tbody = document.querySelector('tbody');
// 遍历数组
for (var i = 0; i < datas.length; i++) {
// 1. 创建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数
// 使用for in遍历学生对象
for (var k in datas[i]) {
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值 datas[i][k] 给 td
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3. 创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除 </a>';
tr.appendChild(td);
}
// 4. 删除操作 开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>