DOM基础——节点

最新推荐文章于 2022-03-27 20:31:35 发布

黎明的蜗牛

最新推荐文章于 2022-03-27 20:31:35 发布

阅读量1.3k

点赞数

分类专栏： BS

本文链接：https://blog.csdn.net/XUJIAOlf/article/details/24032439

版权

BS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、定义

DOM(DocumentObject Model)即文档对象模型。针对HTML和XML文档的API。D(文档)可以理解为整个Web加载的网页文档；O(对象)可以理解为类似window对象之类的东西，例如document，可以调用属性和方法。M(模型)可以理解为网页文档的属性结构。

1. 节点：

加载HTML页面时，Web浏览器生成一个树形结构，用来表示页面内部结构。DOM将这种属性结构理解为由节点组成。

2. 种类：元素节点、属性节点、文本节点

二、查找元素

W3C提供了比较方便简单的定位节点的方法和属性，一遍我们快速的对节点进行操作。

1.getElementById()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM基础</title>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>

<div id='box' name = 'test' title ='test' class = 'pox' style='color:red;’ bbb = ‘aaa’>测试</div>
<input type = 'checkbox' name = 'test' value = '测试' checked='checked' />

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

</body>
</html>


//JS代码
//这里存放当网页所有内容都加载完毕后，再执行的代码
window.οnlοad=function(){
	var box = document.getElementById('box');
	alert(box.tagName);   //获取这个元素节点的标签名
	alert(box.innerHTML);  //获取这个元素节点里的纯文本
}

2. getElementByTagName

//JS代码
window.οnlοad=function(){
	var li = document.getElementsByTagName('li');      //参数传递一个标签名
	//alert(li);                     //返回一个数组集合
	//alert(li.length);           // 返回li数组的数量
	//alert(li[0]);                 // li的节点对象
	//alert(li.item(0));         // 同上，意义一致
	alert(li[0].tagName);    //LI
	alert(li[0].innerHTML);  //1
}

3. getElementByName

//JS代码
window.οnlοad=function(){
	var box = document.getElementsByName('test')[0];      
	alert(box);
	
	//IE浏览器在获取不合法的HTML中的name时，会获取不到
	//name属性本身不是div里的属性，所以IE就忽略掉了。	
}

window.οnlοad=function(){
	var input = document.getElementsByName('test')[0];      
	alert(input);
	alert(input.checked);

	//input中含有合法的name属性，所以IE也就支持了
}

4.getAttribute

//JS代码
window.οnlοad=function(){
         varbox = document.getElementById('box');     
         //alert(box.className);           
         //alert(box.getAttribute('class'));      //IE无法获取
         //alert(box.getAttribute('className'));//IE可以获取，非IE无法获取
        
         //跨浏览器获取className
         if(box.getAttribute('className')==null){
                   alert(box.getAttribute('class'));
         }else{
                   alert(box.getAttribute('className'));
         }
}

5.setAttribute

//JS代码
window.οnlοad=function(){
	var box = document.getElementById('box');      
	box.setAttribute('title','标题');        //创建一个属性和属性值
	box.setAttribute('align','center');
	box.setAttribute('aaa','cccc');
	box.setAttribute('style','color:green;'); //IE7及以下，style和onclick没有效果，避免使用
}

三、查找属性

实例;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM基础</title>
<script type="text/javascript" src="demo2.js"></script>
</head>
<body>

<div id="box" >测试DIV<em>倾斜</em>结尾</div>

<div id = "pox">1</div>

</body>
</html>

//JS代码
window.οnlοad=function(){
	var box = document.getElementById('box');
	//alert(box);
	//alert(box.nodeName);            //获取元素节点的标签名，和tagName等价
	//alert(box.nodeType);             //获取元素节点的类型值：1
	//alert(box.nodeValue);            //元素节点本身没有内容，null
	//node本身把节点指针放在元素<div></div>上，也就是说，本身是没有value
	//如果要输出<div>xxx</div>中里面包含的内容，那么前面innerHTML
	alert(box.innerHTML);         //获取元素节点里面的文本内容
	//node只能读取当前节点的东西
}

1.childNodes

//JS代码
window.οnlοad=function(){
	var box = document.getElementById('box');
	//alert(box.childNodes);       //NodeList集合，返回当前元素节点所有的子节点列表
	//alert(box.childNodes.length);     //3个子节点
	//3个子节点：测试<em>倾斜</em>结尾
	//第一个子节点：测试Div，这个节点称作：文本节点
	//第二个子节点：<em>倾斜</em>，这个节点称作：元素节点
	//第三个子节点：结尾，这个节点称作：文本节点
	
	//alert(box.childNodes[0]);  //Object Text 表示一个文本节点对象
	//alert(box.childNodes[0].nodeType);  //3，表示文本节点
	//alert(box.childNodes[0].nodeValue);  //获取文本节点的文本内容
	//alert(box.childNodes[0].innerHTML);    //undefined无效，当前的文本，怎么可能找到里边的内容
	//alert(box.childNodes[0].nodeName);    //#text ，文本节点没有标签名
}

2.firstChild

//JS代码
window.οnlοad=function(){
	var box = document.getElementById('box');
	alert(box.firstChild.nodeValue);       //获取第一个子节点
	alert(box.lastChild.nodeValue);     //获取最后一个子节点
}

3. parentNode\ previousSibling\ nextSibling

//JS代码
window.οnlοad=function(){
	var box = document.getElementById('box');
	alert(box.parentNode);       //HTMLBodyElement
alert(box.firstChild.nextSibling);  //HTMLSpanElement
	alert(box.firstChild.nodeValue.nextSibling.nodeName);      //下一个同级节点的标签名
	alert(box.lastChild.nodeValue.previousSibling.nodeName); //上一个同级节点的标签名
}

4.attributes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM基础</title>
<script type="text/javascript" src="demo3.js"></script>
</head>
<body>
<div id="box" title = "标题" class ="bbb" >
	<p>测试1</p>
	<p>测试2</p>
	<p>测试3</p>
</div>
</body>
</html>

//JS代码
window.οnlοad=function(){
	var box = document.getElementById('box');
     //alert(box.attributes);      //NameNodeMap,集合数组，保存着这个元素节点的属性
	 //alert(box.attributes.length);     //3个属性
	 //alert(box.attributes[0]);           //Attr，属性节点
	 //alert(box.attributes[0].nodeType);     //2，属性节点的类型值
	 //alert(box.attributes[0].nodeValue);      //box，第一个属性的属性值
	 //alert(box.attributes[0].nodeName);      //class 第一个属性的属性名
}

5.空白文本节点

//JS代码
//第一种方法：
window.οnlοad=function(){
	var box = document.getElementById('box');
	//alert(box.childNodes.length);
	
	alert(filterWhiteNode(box.childNodes).length);
}

//忽略空白字符
function filterWhiteNode(node){
	var ret=[];
	for(var i = 0;i<node.length;i++){
		if(node[i].nodeType===3 && /^\s+$/.test(node[i].nodeValue)){
			continue;
		}else{
			ret.push(node[i]);
		}
	}
	return ret;
}

//第二种方法
window.οnlοad=function(){
	var box = document.getElementById('box');
	//alert(box.childNodes.length);
	
	alert(removeWhiteNode(box.childNodes).length);
}
//移除空白字符
function removeWhiteNode(node){
	for (var i = 0;i < node.length;  i++){
		if(node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)){
			node[i].parentNode.removeChild(node[i]);
		}
	}
	
	return node;

通过这几节课，初步认识了页面的树结构及各个节点。对它们的属性或方法做了Demo。

黎明的蜗牛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
16
评论
DOM基础——节点

一、定义DOM(DocumentObject Model)即文档对象模型。针对HTML和XML文档的API。D(文档)可以理解为整个Web加载的网页文档；O(对象)可以理解为类似window对象之类的东西，例如document，可以调用属性和方法。M(模型)可以理解为网页文档的属性结构。 1. 节点：加载HTML页面时，Web浏览器生成一个树形结构，用来表示页面内部结构。
复制链接

扫一扫

专栏目录