2023-03-15_DOMDAY03-节点操作
1. 节点的概念
-
什么是节点
文档树所有包含的东西都可以称作节点；最关注的节点是元素节点（就是我们平时所说的标签）（head body title hr td tr。。）
-
常用的节点分类
- 元素节点--标签
- 文本节点--标签的内容
- 属性节点--标签的属性
- 注释节点--注释
-
查找节点是相对的操作
如果你拿html的子节点,就是html当中所有的节点但是不包含后代节点，只是子节点
后代和子代要分清
祖先和父要分清
2. 子节点和子元素节点（父节点和父元素）
2.1 子节点和子元素节点
-
childNodes 拿到的是某个元素的子节点：包括子元素节点和文本子节点，如果有注释还有注释节点；
-
children 拿到的是某个元素的子元素节点
-
子节点:childNodes (儿子节点):
- 高级浏览器: 元素,文本(文本,空格,换行),注释
- 低版本浏览器: 元素,文本(不包括空格和换行),注释
-
子元素节点： children(儿子元素):
- 高级浏览器:元素
- 低版本浏览器：元素，注释
2.2 节点类型
nodeType nodeName nodeValue
文本节点 3 #text 文本内容
元素节点 1 元素名大写 null
注释节点 8 #comment 注释内容
2.3 父节点和父元素节点
//父节点和父元素节点
//也是两个属性，这两个属性拿到的都是父元素节点
console.log(box.parentNode);//拿到div元素节点的父节点
console.log(box.parentElement);//拿到div元素节点的父元素节点
3. 获取节点的其他方式
3.1 父子元素
var ul = document.getElementById('uu');
（1）获取所有的子节点 (childNodes)
var all_node_list = ul.childNodes;
console.log(all_node_list);
（2）获取所有的子元素节点 (children)
var all_ele_node_list = ul.children;
console.log(all_ele_node_list);
（3）获取第一个子节点 (firstChild)
var first_node = ul.firstChild;
console.log(first_node);
（4）获取第一个子元素节点 高级浏览器能识别 (firstElementChild)
如果是低级浏览器则会返回undefined
var first_ele_node = ul.firstElementChild;
console.log(first_ele_node);
（5）获取最后一个子节点 ( lastChild )
var last_node = ul.lastChild;
console.log(last_node);
（6）获取最后一个子元素节点 高级浏览器能识别 ( lastElementChild )
如果是低级浏览器则会返回undefined
var last_ele_node = ul.lastElementChild;
console.log(last_ele_node);
3.2 兄弟元素
var li = document.getElementById('l2');
（1）上一个兄弟节点
console.log(li.previousSibling);
（2）上一个兄弟元素节点
只有高级浏览器才可以使用 低级浏览器会返回undefined
console.log(li.previousElementSibling);
（3）下一个兄弟节点
console.log(li.nextSibling);
（4）下一个兄弟元素节点
只有高级浏览器才可以使用 低级浏览器会返回undefined
console.log(li.nextElementSibling);
4. 创建节点
4.1 创建节点-方法1-document-write
第一种动态添加节点，元素的方式，以后不用，因为会覆盖原本有的元素
4.2 创建节点-方法2-innerHTML
说明：几个特殊元素的获取方式
1、htmldocument.documentElement
2、bodydocument.body
3、headdocument.head
//直接写=会发生覆盖，因为它是把body里面的 内容修改为'<h1>我是标题</h1>'
//如果不想修改，必须使用+=才能添加元素
document.body.innerHTML += '<h1>我是标题</h1>';
document.body.innerHTML = document.body.innerHTML + '<h1>我是标题</h1>'
4.3 创建节点-方法3-createElement
//1、创建一个你想添加的元素 dom对象，但是创建好的这个对象并不在页面上
var h1Node = document.createElement('h1');
//2、把创建好的h1标签写内容
h1Node.innerHTML = '我是标题';
//3、经历完前两步，h1标签就已经准备好了，然后页面上想要看到，必须把h1添加给页面上已经存在的元素
document.body.appendChild(h1Node);//追加的意思就是末尾加
5. 创建列表添加
5.1 列表遍历-方法1
<script>
var arr = ['貂蝉','西施','王昭君','杨玉环'];
// innerHTML
var str = '<ul>';
for(var i = 0; i < arr.length; i++){
var str2 = '<li>' + arr[i] + '</li>';
str += str2;
}
str += '</ul>';
console.log(str);
document.body.innerHTML += str;
</script>
5.2 列表遍历-方法2
<script>
var arr = ['魔力红','魔力海','魔力青','魔力兽'];
var ul = document.createElement('ul');
for(var i = 0; i < arr.length; i++){
var li = document.createElement('li');
li.innerHTML = arr[i];
ul.append(li);
}
console.log(ul);
document.body.append(ul);
</script>
6. 节点的增删改
6.1 添加
- 节点-增-从末尾增 (
appendChild)
<script>
var ul = document.querySelector('ul');
var li = document.createElement('li');
li.innerHTML = '攀枝花的芒果'
// ul.append(li);
ul.appendChild(li);
</script>
- 节点-增-从某个位置增 (
insertBefore(newEle, oldEle))
<script>
var ul = document.querySelector('ul');
// 新增的li
var liNew = document.createElement('li');
liNew.innerHTML = '草莓';
// 旧的li
var liOld = document.querySelector('li:nth-child(1)');
ul.insertBefore(liNew,liOld);
</script>
6.2 改
- 节点-改 (
replaceChild(newEle, oldEle))
<script>
var ul = document.querySelector('ul');
var liNew = document.createElement('li');
liNew.innerHTML = '金刚川';
var liOld = document.querySelector('li:nth-child(1)');
// replace方法不可以直接使用
// replaceChild
// 参数的顺序
ul.replaceChild(liNew,liOld);
</script>
6.3 删除
- 节点-删
<script>
// 官网提供的删除方式 比较墨迹
// var ul = document.querySelector('ul');
// var li = document.querySelector('li:nth-child(3)');
// ul.removeChild(li);
var li = document.querySelector('li:nth-child(3)');
li.remove();
</script>
字符串方法( trim( ) ) - 去除空格
trim只能去除前面和后面的空白
-案例练习---输入框添加歌曲列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>案例练习</title>
</head>
<body>
<input type="text" placeholder="请输入歌曲">
<ul></ul>
<script>
var inp = document.querySelector('input');
var ul = document.querySelector('ul');
inp.onkeyup = function (event) {
if (event.keyCode == 13) {
// 获取文本框中的value
var name = inp.value;
// if里面是boolean表达式
// 只有为true的时候才会执行代码
// Boolean('')的结果是false
if (name.trim()) {
var li = document.createElement('li');
li.innerHTML = name.trim();
ul.append(li);
li.onmouseenter = function(){
this.style.backgroundColor = 'yellowgreen';
}
li.onmouseleave = function(){
this.style.backgroundColor = '';
}
// 注意要清除文本框中的内容 而不是清除name值
inp.value = '';
// 以下的方法并不是最优解
// 原因是因为每添加一个对象 都会重新遍历所有的li
// var li_list = document.querySelectorAll('li');
// console.log(li_list.length);
// for (var i = 0; i < li_list.length; i++) {
// li_list[i].onmouseenter = function () {
// this.style.backgroundColor = 'skyblue';
// }
// li_list[i].onmouseleave = function () {
// this.style.backgroundColor = '';
// }
// }
} else {
alert('请输入歌曲名字');
}
}
}
</script>
</body>
</html>
