js-DOM

最新推荐文章于 2022-04-29 23:34:21 发布

闫梅

最新推荐文章于 2022-04-29 23:34:21 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/yantingmei/article/details/21273231

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文档对象模型DOM

DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.
D：文档 – html 文档或 xml 文档
O：对象 – document 对象的属性和方法
M：模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点（node）的层次。
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

例1：

getElementsByTagName()
寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements .length);

<!DOCTYPE html>
<html>
  <head>
    <title>l.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  <script type="text/javascript">
	function  searchDOM(){
		//1.li开始查
		//根據标签名查nodelist
		var lis=document.getElementsByTagName("li");
		//alert(lis.length);
		alert(lis[1].childNodes[0].nodeValue);//javaScript
		 //2.ul查
	    var uls=document.getElementsByTagName("ul");
	    //alert(uls.length);
	    alert(uls[1].childNodes.length+"///");//7
	    var lius=uls[1].getElementsByTagName("li");
	    alert(lius[1].childNodes[1].childNodes[0].nodeValue+"==============");
	    //3.根据id 查
	     var css=document.getElementById("cass");
	    alert(css.childNodes[0].nodeValue);
		/**
		元素节点的 nodeName 是标签名称 
		属性节点的 nodeName 是属性名称 
		文本节点的 nodeName 永远是 #text 
		文档节点的 nodeName 永远是 #documen
		 */
	   //4.nodeType元素节点类型,元素节点为1,属性节点为2，文本节点为3,document为9
	    alert(css.childNodes[0].nodeType);//文本类型为3
	    alert(document.nodeType);//document的nodeType为9
	}
	</script>
  </head>
  
  <body οnlοad="searchDOM()">
	<ul>
		客户端语言
		<li>HTML</li>
		<li>JavaScript</li>
		<li  id="cass">CSS</li>
	</ul>
	<ul>
		服务器端语言
		<li>ASP.NET</li>
		<li>vvv<span>j</span></li>
		<li>PHP</li>
	</ul>
  </body>
</html>

1.li开始查

2.ul查询结果

3.根据id 查

例2：

<!DOCTYPE html>
<html>
<head>
<title>l.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">
	function myDOMInspector() {
		//1.通过子节点查找
		var d = document.getElementById("myList");
		var lis = d.getElementsByTagName("li");
		var str = "";
		for ( var i = 0; i < lis.length; i++) {
			str = str + "  " + lis[i].childNodes[0].nodeValue;
		}
		alert(str);
		//2.通过父节点查找，反向查找、
		var food = document.getElementById("me");
		alert(food.parentNode.childNodes[0].nodeValue);//  午餐菜单
		//3.控制向上查找范围
		var foods = document.getElementById("me");
		var parent = foods.parentNode;
		while (parent.className != "food") {
			parent = parent.parentNode;
			alert(parent.tagName + "1111111111111111");
		}
		//4.兄弟节点
		var foodss = document.getElementById("me");
		alert(foodss.nextSibling.childNodes[0].nodeValue);//后兄弟
	
		alert(foodss.previousSibling.childNodes[0].nodeValue);//前兄弟 
		/*  兄弟节点，最常用的方法之一
		var silbing=foodss.nextSibling;
		 while(silbing.nodeType==3){
		 	silbing=silbing.nextSibling;
		 }
		 alert("-----------"+silbing.childNodes[0].nodeValue); */
	}
</script>
	<!-- function prevSib(node){
	var tempFirst = node.parentNode.firstChild;
	//判断是否是第一个节点，如果是则返回null
	if(node == tempFirst)
		return null;
	var tempObj = node.previousSibling;
	//逐一搜索前面的兄弟节点，直到发现元素节点为止
	while(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
		tempObj = tempObj.previousSibling;
	return (tempObj.nodeType==1)?tempObj:null;
}
function myDOMInspector(){
	var myItem = document.getElementById("myDearFood");
	//获取后一个元素兄弟节点
	var nextListItem = nextSib(myItem);
	//获取前一个元素兄弟节点
	var preListItem = prevSib(myItem);
	alert("后一项:" + ((nextListItem!=null)?nextListItem.firstChild.nodeValue:null) + " 前一项:" + ((preListItem!=null)?preListItem.firstChild.nodeValue:null) );
}
</script> -->
</head>

<body οnlοad="myDOMInspector()">
	<ul class="food">
		<li>
			<ul id="myList">
				午餐菜单
				<li>糖醋排骨</li>
				<li>圆笼粉蒸肉</li>
				<li>泡菜鱼</li>
				<li id="me">板栗烧鸡</li>
				<li>麻婆豆腐</li>
			</ul>
		</li>
	</ul>

</body>
</html>

例3：

<!DOCTYPE html>
<html>
<head>
<title>dl.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
	function myDOMInspector() {
		//1.取属性
		var node = document.getElementsByTagName("img");
		alert(node[0].getAttribute("title"));
	
		//3.插入文字
		var nodep=document.getElementsByTagName("p");
		var text=document.createTextNode("只是一个故事");
		nodep[0].appendChild(text);
		
		//4.删除文字
		alert(nodep[0].childNodes[0].nodeValue);
		//nodep[0].removeChild(text);
		
		//5.替换文字
		var text1=document.createTextNode("故事");
		nodep[0].replaceChild(text1,text);
		
		//6.特定位置插入文字
		/* var p1=document.createElement("p");
		var text2=document.createTextNode("故事的开头");
		p1.appendChild(text2);
		nodep[0].parentNode.insertBefore(p1,nodep[0]); */
		
		
	    //2.换属性
	    node[0].setAttribute("src","2.jpg");
	    node[0].setAttribute("title","美丽风景");
		alert(node[0].getAttribute("title"));
	
	   //7.文档碎片
		var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"];
	    var doc=document.createDocumentFragment();
	    for(var i=0;i<aColors.length;i++){
	    	var text3=document.createTextNode(aColors[i]);
	    	doc.appendChild(text3);
	    }
	   nodep[0].parentNode.insertBefore(doc,nodep[0]);
	}
</script>
</head>

<body οnlοad="myDOMInspector()">
<p></p>
	<img src="01.jpg" title="情人坡" />
</body>
</html>

当添加的节点非常多时，页面执行效率低，可以创建一个文档碎片，把新的节点先添加到该碎片上，再一次性添加到页面上。
document.createDocumentFragment();

闫梅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-DOM

文档对象模型DOMDOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.D：文档 – html 文档或 xml 文档O：对象 – document 对象的属性和方法M：模型DOM 是针对xml(html)的基
复制链接

扫一扫

专栏目录