javascript-节点属性
HTML文档中的每个成分都是一个节点
节点
根据DOM,HTML文档中的每个成分都是一个节点,DOM是这样规定的:
●整个文档是一个文本节点
●每个HTML标签是一个元素节点
●包含在HTML元素中的文本是文本节点
●每一个HTML属性是一个属性节点
●注释属于注释节点
所以
●获得html中元素的对象-其实是在操作元素节点
●对元素对象的内容进行操作-其实是在操作文本节点
●对元素对象的属性进行操作-其实是在操作属性节点
一、获得节点的引用
1.旧的获取方式
document.getElementById();
document.getElementsByTagName();
document.getElementsByName();
document.getElementsByClassName();
劣势:
1.浪费内存
2.逻辑性不强
2.通过节点的关系属性获得节点的引用
对象.parentNode获得父节点的引用
对象.childNodes获得子节点的集合
对象.firstChild获得第一个子节点
对象.lastChild获得最后一个子节点
对象.nextSibling获得下一个兄弟节点的引用
对象.previousSibling获得上一个兄弟节点的引用
劣势：兼容性不好(包含空节点)
<head>
<meta charset="UTF-8">
<title>javascript-节点属性</title>
<style>
.outer{
width: 600px;
height: 600px;
border: 1px solid pink;
}
.inner{
width: 200px;
height: 120px;
background-color: cyan;
padding: 10px;
}
span{
width: 100px;
height: 90px;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div id="outer" class="outer">外层div
<p class="inner">p标签</p>
<div id="inner" class="inner"><span>内层div里面的span标签</span></div>
<!--注释内容-->
<h2 class="inner">h3标签</h2>
<u class="inner">下划线</u></div>
<script>
var outerDiv=document.getElementById("outer");
var chids=outerDiv.childNodes;
document.write(chids.length);
</script>
二、节点的信息(属性)
| 节点 | 节点类型nodeType(数值)
|
节点名字nodeName
|
节点值 nodeValue
|
|---|---|---|---|
| 元素节点 | 1 | 标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text |
本 |
| 注释节点 | 8 | #comment |
注释的文字 |
| 文档节点 | 9 | #document |
null |
<head>
<meta charset="UTF-8">
<title>javascript-节点属性</title>
<style>
.outer{
width: 600px;
height: 600px;
border: 1px solid pink;
}
.inner{
width: 200px;
height: 120px;
background-color: cyan;
padding: 10px;
}
span{
width: 100px;
height: 90px;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div id="outer" class="outer">外层div
<p class="inner">p标签</p>
<div id="inner" class="inner"><span>内层div里面的span标签</span></div>
<!--注释内容-->
<h2 class="inner">h3标签</h2>
<u class="inner">下划线</u></div>
<script>
var outerDiv=document.getElementById("outer");
var childs=outerDiv.childNodes;
for(var i=0;i<childs.length;i++){
document.write(childs[i].nodeType+" "+childs[i].nodeName+" "+childs[i].nodeValue);
document.write("<br/>");
}
document.write("文档节点 "+document.nodeType+" "+document.nodeName+" "+document.nodeValue);
</script>
输出
3 #text 外层div
1 P null
3 #text
1 DIV null
3 #text
8 #comment 注释内容
3 #text
1 H2 null
3 #text
1 U null
文档节点 9 #document null
var innerDiv=document.getElementById("inner");
var father=innerDiv.parentNode;
document.write(father.nodeName);
var innerDiv=document.getElementById("inner");
var lastChild=innerDiv.lastChild;
document.write(lastChild.nodeName);
兼容写法--不统计空白节点
<script>
var outerDiv=document.getElementById("outer");
//获得所有子节点的兼容方法
function getChilds(obj) {
var childs=obj.childNodes;
var arr=[];
for(var i=0;i<childs.length;i++){
if(childs[i].nodeType==3&&/^\s+$/.test(childs[i].nodeValue)){
continue;
}else{
arr.push(childs[i]);
}
}
return arr;
}
var length=getChilds(outerDiv).length;
document.write(length);
</script>
兼容写法
<script>
var outerDiv=document.getElementById("outer");
function last(obj) {
var last=obj.lastChild;
while(last.nodeType==3){
last=last.previousSibling;
}
return last;
}
document.write(last(outerDiv).nodeName);
</script>
兼容写法
function nextSiblingNode(obj) {
var nexts=obj.nextSibling;
while (nexts.nodeType==3){
nexts=nexts.nextSibling;
}
return nexts;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-节点属性</title>
<style>
ul{
list-style-type: none;
}
li{
width: 150px;
background-color: goldenrod;
}
.one{
cursor: pointer;
background-color: aqua;
}
</style>
</head>
<body>
<ul>
<li class="one">第一选项</li>
<li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</li>
</ul>
<ul>
<li class="one">第二选项</li>
<li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</li>
</ul>
<ul>
<li class="one">第三选项</li>
<li>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</li>
</ul>
<script>
var lis=byClass("one");
for (var i=0;i<lis.length;i++){
lis[i].onclick=function () {
if(nextSiblingNode(this).style.display==""){
nextSiblingNode(this).style.display="none";
} else{
nextSiblingNode(this).style.display=""
}
}
}
//兼容写法
function nextSiblingNode(obj) {
var nexts=obj.nextSibling;
while (nexts.nodeType==3){
nexts=nexts.nextSibling;
}
return nexts;
}
//兼容写法
function byClass(className) {
if(document.getElementsByClassName){
return document.getElementsByClassName(className);
}else{
var tag=document.getElementsByTagName("*");
var elements=[];
for(var i=0;i<tag.length;i++){
if(tag[i].className==className){
elements.push(tag[i]);
}
}
return elements;
}
}
</script>
</body>
</html>
网友评论