收藏
<!DOCTYPE html>
<html lang="zh">
<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></div>
<ul id="uls">
<li>1</li>
<li>2</li>
<li id="test">3</li>
<li>4</li>
<li>5</li>
</ul>
<input type="text" name="aaa" value="ddd" title="cc" class="ee" id="ss"/>
</body>
<script type="text/javascript">
//测试元素节点
var uls = document.getElementById('uls');
//节点名称
console.log(uls.nodeName);
//第一个子元素的节点名称,包含文档节点
console.log(uls.firstChild.nodeName);
//最后一个子元素的节点名称，包含文档节点
console.log(uls.lastChild.nodeName);
//childNodes元素节点,包含了该元素下的所有节点信息，包含了文档节点，子元素节点，注释节点等
console.log(uls.childNodes);
//children 只获取到下级标签元素节点,不包含注释节点和文本节点
console.log(uls.children);
//测试父节点
var test = document.getElementById('test');
//parentNode 父节点
//nodeName 节点名称
console.log(test.parentNode.parentNode.parentNode.parentNode.nodeName);
//nextSibling 下一个的兄弟节点,会计算文本节点
console.log(test.nextSibling.nextSibling.nextSibling.nextSibling);
//previousSibling 上一个的兄弟节点，会计算文本节点
console.log(test.previousSibling.previousSibling.previousSibling.previousSibling);
//parentNode 父节点，不包含文本，注释节点
//children 子节点，不包含文本，注释节点
console.log(test.parentNode.parentNode.children[0]);
//测试所有属性集合
var ss = document.getElementById('ss');
//attributes 所有属性集合
//nodeValue 节点值,对于文档节点和元素节点不可用的
console.log(ss.attributes[1].nodeValue);
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
