DOM节点
DOM对象属性
innerHTML 节点(元素)的文本值
parentNode 节点(元素)的父节点
childNodes 节点(元素)的子节点(包含所有子节点的集合,包括元素节点、文本节点)(firstChild:第一个子节点,lastChild:最后一个子节点)
attributes 节点(元素)的属性节点
nodeName 节点(元素)的名称,只读。(元素节点的 nodeName 与标签名相同,属性节点的 nodeName 与属性名相同,文本节点的 nodeName 始终是 #text,文档节点的 nodeName 始终是 #document)
nodeValue 节点(元素)的值(元素节点的 nodeValue 是 undefined 或 null,文本节点的 nodeValue 是文本本身,属性节点的 nodeValue 是属性值)
nodeType 节点(元素)的类型,只读。(元素:1, 属性:2, 文本:3, 注释:8, 文档:9)
DOM 对象方法
getElementById() 返回带有指定ID的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
元素创建与删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<p>我是一个自然段</p>
<script>
// 1 创建元素
var oDiv = document.createElement('div');
// 2 添加元素
//document.body.appendChild(oDiv); // 在元素末尾添加
// 在任意位置插入元素 第一个参数 需要添加的元素 第二个参数表示参照物
document.body.insertBefore(oDiv,document.body.children[0]);
// 3 设置div
oDiv.innerHTML = '我是动态生成的';
// 找到p元素
var oP = document.querySelector('p');
//oP.remove(); 自杀
document.body.removeChild(oP); // 父亲中删除儿子
</script>
</body>
</html>
微博发布
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
margin: 50px auto;
}
ul {
list-style: none;
margin: 50px auto;
}
li {
width: 200px;
border-bottom: 1px dashed #ccc;
padding: 6px;
}
li a {
float: right;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<input type="text" name="" id="txt">
<button>发布</button>
<ul>
</ul>
</div>
<script>
// 获取相关元素(按钮、文本框、列表)
var txt = document.querySelector('#txt');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
// 给按钮绑定事件
btn.onclick = function() {
// 1 获取用户输入的值
var v = txt.value;
// 2 创建li
var oLi = document.createElement('li');
oLi.innerHTML = v + "<a href='javascript:;'>删除</a>";
// 3 添加到ul的最前面
ul.insertBefore(oLi,ul.children[0]);
// 获取删除元素
var alink = oLi.querySelector('a');
alink.onclick = function() {
this.parentNode.remove();
}
}
</script>
</body>
</html>
### 节点复制
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p>我是一段落</p>
</div>
</body>
</html>
<script type="text/javascript">
var oDiv = document.querySelector("div");
//var divClone = oDiv.cloneNode();// 浅复制 只复制父亲 子元素不复制
var divClone = oDiv.cloneNode(true);
document.body.appendChild(divClone);//
</script>
节点克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" id="tb">
<tr>
<td><input type="checkbox"></td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>男</td>
<td>34</td>
</tr>
</table>
姓名:<input type="text" id="userName" />
性别: <input type="radio" name="sex" id="d" />男
<input type="radio" name="sex" />女
年龄: <input type="text" name="" id="age" />
<input type="button" id="saveBtn" value="保存" />
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
$("saveBtn").onclick = function () {
// 复制第一行
var tr = $("tb").children[0].children[0].cloneNode(true);
//(table下有一个tbody标签)第一个children[0]是tbody,第二个是tr
//参数不写或者是false,默认是浅层克隆
// 添加到表格
$("tb").children[0].appendChild(tr);
// 修改当前复制行的内容
tr.children[1].innerHTML = $("userName").value;
var sex = $("d").checked ? "男" : "女";
tr.children[2].innerHTML = sex;
tr.children[3].innerHTML = $("age").value;
}
</script>
</body>
</html>
创建元素总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>123</p>
<div>456</div>
<button>添加</button>
<div class="link-box"></div>
<script>
// document.write() 假如页面文档流加载完毕后执行会导致页面重绘
// document.write('<h1>一级标题</h1>');
document.querySelector('button').onclick = function() {
document.write('<h1>一级标题</h1>');
}
// // innerHTML创建元素
var linkBox = document.querySelector('.link-box');
var d1 = new Date();
var str ="";
//方法一
// for(var i =0;i<1000;i++){
// str += '<span>' + (i+1) + '</span>';
// }
// linkBox.innerHTML = str;
//第二种方法 (【不推荐】速度很慢)
// for(var i=0; i<1000; i++) {
// linkBox.innerHTML += '<span>'+(i+1)+'</span>';
// }
// 方法三 creatElement
for(var i= 0;i<1000;i++){
var oSpan = document.createElement('span');
oSpan.innerText = i+1;
linkBox.appendChild(oSpan);
}
var d2 = new Date();
console.log(d2-d1);
</script>
</body>
</html>
节点碎片
- 我们要明白当js操作dom时发生了什么?
每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少 dom操作来减少"重排"
- 什么是文档碎片?
document.createDocumentFragment() 一个容器,用于暂时存放创建的dom元素
- 文档碎片有什么用?
将需要添加的大量元素 先添加到文档碎片中,再将文档碎片添加到需要插入的位置,大大 减少dom操作,提高性能(IE和火狐比较明显)
<!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>
<div id="part"></div>
<script>
//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率
var part = document.getElementById("part");
//创建一万个段落,常规的方式
// var d1 = new Date();
// for (var i = 0; i < 10000; i++) {
// var p = document.createElement("p");
// oTxt = document.createTextNode("段落" + i);
// p.appendChild(oTxt);
// part.appendChild(p);
// }
// var d2 = new Date();
// console.log("第一次创建需要的时间:" + (d2.getTime() - d1.getTime()));
//使用了createDocumentFragment()的程序
var d3 = new Date();
var pFragment = document.createDocumentFragment();
for (var i = 0; i < 10000; i++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
pFragment.appendChild(p);
}
part.appendChild(pFragment);
var d4 = new Date();
console.log("第2次创建需要的时间:" + (d4.getTime() - d3.getTime()));
</script>
</body>
</html>