JavaScript高级进阶（四）
上次说了节点属性，其实节点属性不是很常用，大多数情况下我们只想获取元素，我们可以:
Element属性
加了element的属性，只返回元素节点(标签)，不再包含文体换行等文体节点:
firstElementChild //返回节点的第一个子节点【元素】
lastElementChild //返回节点的最后一个子节点
nextElementSibling //下一个元素节点
previousElementSibling //上一个元素节点
例:
<div class="box">
<ul class="name">
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
<li>诸葛亮</li>
</ul>
</div>
<script>
//找到ul
var ul_ =document.getElementsByClassName('name')[0];
//找到刘备
console.log(ul_.firstElementChild);
//找到关羽
console.log(ul_.firstElementChild.nextElementSibling);
//找到诸葛亮
console.log(ul_.lastElementChild);
//找到张飞
console.log(ul_.lastElementChild.previousElementSibling);
</script>
//获取诸葛亮这几个字,因为其不是元素所以用child，找到文字节点后用nodevalue取出里面的值
console.log(ul_.lastElementChild.firstChild.nodeValue);
如果是要替换里面的值:
//把诸葛亮换成事后诸葛亮
console.log(ul_.lastElementChild.innerHTML='事后诸葛亮');
//innerText也行
console.log(ul_.lastElementChild.innerText='事后诸葛亮');
//获取ul类名name(获取属性节点的值)
var val =ul_.getAttributeNode('class').value;
console.log(val);
//还可以拿到图片路径
console.log(ul_.parentNode.nextElementSibling.getAttributeNode('src').value);
首先在div下放一张图
<div class="box">
<ul class="name">
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
<li>诸葛亮</li>
</ul>
</div>
< img src="./images/屏幕截图 2024-05-29 231135.png" id="pic">
//获取属性节点
var pic_ =document.getElementById('pic'); console.log(pic_.getAttributeNode('id').value);
节点信息
nodeName:获取节点的名称，比如获取节点是什么标签。
nodeValue:节点值，比如获取h1标签包裹的内容。
nodeType:节点类型，有不同的数值对应不同的节点类型。
节点类型与对应NodeType值
元素dement : 1
属性attr : 2
文本text : 3
注释comments : 8
文档document : 9
例:
<div class="box">
<ul>
<li>刘备</li>
</ul>
</div>
<script>
var box =document.getElementsByClassName('box')[0];
// console.log(box.firstElementChild);确认拿到ul
console.log(box.firstElementChild.nodeName);
//节点名称返回的是大写，可toLocaleLowerCase()转化成小写
console.log(box.firstElementChild.nodeName.toLocaleLowerCase());
//节点值 box.firstElementChild(ul).firstElementChild(li)
var li =box.firstElementChild.firstElementChild;
//第一个子节点中的文字
console.log(li.firstChild.nodeValue);
//元素对应值
console.log(li.nodeType);
最后做一个练习，获取一下书的价格:
就是类似于这么个页面，随便仿照写写就行，我们主要做的是练习节点的获取——全部选中时下面的也对应的内容也对应都选中，点击加减按钮时，里面的数字也对应进行±1，勾选的部分也会对应放进总计中。
这就是对获取节点，绑定事件的一个练习，不要写一半一看觉得这么麻烦，以后工作写真实的项目不会这么麻烦，后面学习vue一些框架，几乎不会对原始dom节点进行操作，我们练习也是为了明白一些最原始基本的方法，作为日后学习的底气与储备。