Document对象，Element对象和Node对象简介

最新推荐文章于 2024-05-02 16:45:00 发布

在路上的JavaCoder-尹骑

最新推荐文章于 2024-05-02 16:45:00 发布

阅读量2w

点赞数 2

分类专栏： JavaScript 文章标签： Element对象 Node对象 JavaScript Document对象

本文链接：https://blog.csdn.net/facekbook/article/details/11380253

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Document对象：

根元素的访问，也就是HTML标签的访问。使用document.documentElement访问根对象。
使用Document对象查找对象
- getElementById()：通过节点的id属性，查找对应节点。
- getElementsByName()：通过节点的name属性，查找对应节点。
- getElementsByTagName()：通过节点名称，查找对应节点。
使用Document对象的方法创建节点：
- crateElement(tagName)：创建元素节点。
- createTextNode(data)：创建文本节点。
- createAttirbute(name)：创建属性节点。(不使用)

Element对象：

操作Element对象的属性：
- 获取属性：getAttribute(name);方法
- 设置属性：setAttribute(name,value)方法。
- 删除属性：removeAttribute(name);方法。
在Element对象中查找Element对象：
- 在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合。

Element对象的一个案例：

在一个<ul></ul>标签下创建一个li标签

 <body>
  	<ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
    </ul>
  		<script type="text/javascript">
  			//创建一个标签元素
			var liElment = document.createElement("li");
			//创建一个文本节点
			var textElement = document.createTextNode("上海");
			//将文本节点加到标签元素下面
			liElment.appendChild(textElement);
			//为标签元素创建属性
			liElment.setAttribute("id","sh");
			liElment.setAttribute("name","Shanghai");
			//将标签元素加到ul标签下
			document.getElementById("city").appendChild(liElment);
  		</script>
  </body>

Node对象包含：

节点名称，值和类型。
父节点，子节点和同辈节点。
节点属性
检测子节点和属性。
操纵Dom节点树。
复制和移动节点。

节点名称，值和类型：

nodeName：其内容就是给节点的名称。
- 如果是元素节点，nodeName返回这个元素的名称。
- 如果是属性节点，nodeName返回这个属性的名称。
- 如果是文本节点，nodeName返回这个内容为#text的字符串。
nodeType：返回一个整数，这个数值代表给点节点的类型。
- Node.ELEMENT_NODE：1，元素节点。
- Node.ATTRIBUTE_NODE：2，属性节点。
- Node.TEXT_NODE：3，文本节点
nodeValue：返回给定节点的当前值(字符串)：
- 如果给定节点是一个元素节点：返回null。
- 如果给定节点是一个属性节点：返回属性的值。
- 如果给定节点时一个文本节点：返回文本节点的内容。

下面是使用的示例：

<body>
    <ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
    </ul>
	<p>
		你好		
	</p>
	<script type="text/javascript">
		var bj = document.getElementById("bj");
		//元素节点
//		alert(bj.nodeName);//li
//		alert(bj.nodeType);//1
//		alert(bj.nodeValue);//null
		
		//属性节点
//		var name = bj.getAttributeNode("name")
//		alert(name.nodeName); //name
//		alert(name.nodeType); //2
//		alert(name.nodeValue); //beijing
		
		var p = document.getElementsByTagName("p")[0];
		var text = p.childNodes[0];
		
		alert(text.nodeName);//#text
		alert(text.nodeType);//3
		alert(text.nodeValue);//你好
		
	</script>
  </body>

父节点，子节点和同辈节点：

父节点：parentNode:
- parentNode返回的永远都是一个节点，因为只有元素节点才有可能包含子节点。
- document节点没有父节点。也就是文档节点没有父节点，也就是HTML
子节点：childNode：
- childNodes，获取指定节点的所有子节点。其实上个例子已经使用了。
- firstChild：指定第一个子节点。
- lastChild：指定最后一个子节点。
同辈节点：
- nextSibling：返回一个给定节点的下一个兄弟节点。
- previousSibling：返回一个节点的上一个兄弟节点。

示例如下：

 <body>
  	<ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
    </ul>
	<p>你好</p><input type="text">
	<script type="text/javascript">
		//获取p标签的父，子，兄节点
		var p = document.getElementsByTagName("P")[0];
		alert(p.parentNode);//body
		alert(p.childNodes[0].nodeValue)//你好
		alert(p.previousSibling.nodeValue)//空格，说明空格也会作为一个节点
		alert(p.nextSibling.nodeName);//input。这里就没出现空格，就是input节点
	</script>
  </body>

节点属性：

节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点的属性(特别是元素节点)的属性。
事实上，attributes中包含的是一个节点所有属性的集合。

attributes.getNameItem()和Element元素的getAttribute()方法很相似。

<body>
     <ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
    </ul>
	<script type="text/javascript">
		var bj = document.getElementById("bj");
		alert(bj.attributes[1].nodeValue);		
	</script>
  </body>

检测子节点和属性

查看是否有子节点：hasChildNodes();
查看是存在属性：hasAttributes();
- 即使节点中没有定义属性，其attributes属性还是有效的，而且长度是0。同样childNodes属性也是如此。
当你想知道某个节点是否包含子节点或属性时，使用hasChildNodes(),hasAttributes()。如果想知道包含多少个：attributes和childNodes属性。
在IE中不存在hasAttributes();方法。(不使用)

示例如下：

<body>
   	<input type="text" id="username" value="username">
	<p>
		明天休息
	</p>
	<script type="text/javascript">
//		var username = document.getElementById("username");
//		alert(username.hasChildNodes());//false
//		alert(username.hasAttribute());//无效果	
		
		var p = document.getElementsByTagName("p")[0];
		alert(p.hasChildNodes());//true
		
	</script>
  </body>

操作Dom节点数：

插入节点：
- appendChild()方法。
- insertBefore()方法。
- 没有insertAfter()方法。
删除节点：
- removeChild()方法。
替换节点：
- replaceChild()

示例

<body>
    <ul id="city">
    	<!--注意这里不要回车-->
	    <li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li>
    </ul>
	<script type="text/javascript">
	//创建<li id="sh" name="shanghai">上海</li>节点，增加到天津节点的前面
//		var liElement = document.createElement("li");
//		liElement.appendChild(document.createTextNode("上海"));
//		liElement.setAttribute("id","sh");
//		liElement.setAttribute("name","shanghai");
//		liElement.insertBefore(document.getElementById("tj"));
//		document.getElementById("city").appendChild(liElement);
		
		//<li id="sh" name="shanghai">上海</li>节点插入北京节点的后面，没有insertAfter()方法。
		
		var liElement = document.createElement("li");
		liElement.appendChild(document.createTextNode("上海"));
		liElement.setAttribute("id","sh");
		liElement.setAttribute("name","shanghai");
		
		var bjElement = document.getElementById("bj")
		//得到兄弟节点
		var nextElement = bjElement.nextSibling;
		liElement.insertBefore(nextElement);
		//添加到city下面
		document.getElementById("city").appendChild(liElement);
		
		
		
	</script>
  </body>

复制和移动节点：

复制节点：cloneNode(boolean)方法，其中boolean参数是判读是否复制子节点。
移动节点：由三种方法组合完成：
- 查找节点：
  - getElementById();通过节点id属性，查找对应节点。
  - getElementsByName();通过节点名称，查找对应节点。
  - getElementsByTagName();通过节点名称，查找对应节点。
- 插入节点：
  - insertBefore()方法
  - appendChild()方法。
- 替换节点：
  - replaceChild()方法。

示例代码如下：

  <body>
  	<ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
    </ul>
	<ul id="game">
    	<li id="fk" name="fankong">反恐精英</li>
		<li id="xj" name="xingji">星际</li>
    </ul>
	<script type="text/javascript">
		//当点击北京节点，就和反恐精英替换
		document.getElementById("bj").onclick = function(){
			//得到北京节点
			var bjElement = document.getElementById("bj");
			//得到反恐精英
			var fkElemet = document.getElementById("fk");
			//这里也可以:this.parentNode.replaceChild(fkElemet,bjElement);
			bjElement.parentNode.replaceChild(fkElemet,bjElement);
		}		
	</script>
  </body>

复制案例：

<body>
  		<input type="button" id="login" value="登陆">
		<p>
			按钮来这：
		</p>
		<script type="text/javascript">
			document.getElementById("login").onclick = function(){
				
				var loginElement = document.getElementById("login");
				
				//也可以写成:var copy = this.cloneNode(true);
				var copy = loginElement.cloneNode(true);
				
				var pElemet = document.getElementsByTagName("p")[0];
				pElemet.appendChild(copy);
			}
		</script>
  </body>

在路上的JavaCoder-尹骑

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
Document对象，Element对象和Node对象简介

Document对象：根元素的访问，也就是HTML标签的访问。使用document.documentElement访问根对象。使用Document对象查找对象getElementById()：通过节点的id属性，查找对应节点。getElementsByName()：通过节点的name属性，查找对应节点。getElementsByTagName()：通过节点名称，查找对应节点。
复制链接

扫一扫