关闭

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

标签: Element对象Node对象JavaScriptDocument对象
17236人阅读 评论(2) 收藏 举报
分类:

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>

1
0
查看评论

Element和Node的区别你造吗?

1.写在前面 我们经常使用document.getElementById去获取DOM中的元素,也会使用childNodes来获取子节点。那么Element和Node的区别是什么?而什么又是HTMLCollection,HTMLElement,和NodeList呢? 一个简单的页面:<htm...
  • kkkkkxiaofei
  • kkkkkxiaofei
  • 2016-09-21 15:08
  • 5971

Dom4j 中Node节点 和Element元素的区别

最近在做XML文件解析的项目。Dom4j可以获取Node和Element 两种,但是两种的区辨到底是什么,我有些迷惑,在网上找到了一些比较合理的解释, Node是节点,一个属性、一段文字、一个注释等都是节点,而Element是元素,是比较完整的一个xml的元素,即我们口头上说的xml“结点”(此处故...
  • u011687186
  • u011687186
  • 2016-07-20 15:22
  • 2932

元素(Element)和结点(Node)的区别(org.w3c.dom)

1.元素(Element)和结点(Node)的区别, 元素是一个小范围的定义,必须是含有完整信息的结点才是一个元素,例如...。 但是一个结点不一定是一个元素,而一个元素一定是一个结点。 什么是node:   NODE是相对TREE这种数据结构而言的。TREE就是由NODE组...
  • FastThinking
  • FastThinking
  • 2012-02-27 16:28
  • 10644

DOM中node和element区别

1.元素(Element)和结点(Node)的区别,元素是一个小范围的定义,必须是含有完整信息的结点才是一个元素,例如...。但是一个结点不一定是一个元素,而一个元素一定是一个结点。 什么是node:   NODE是相对TREE这种数据结构而言的。TREE就是由NODE组成。...
  • icycityone
  • icycityone
  • 2013-12-13 13:31
  • 1011

java解析XML Node与Element的区别

对Element和Node有困惑是因为对xml整个结构不了解,以下作为一个简要概述:
  • qq_19457117
  • qq_19457117
  • 2016-04-12 21:31
  • 4047

js-元素对象 Element对象一

要操作element对象,首先要获取到element 使用document对象里面相应的方法获取。 方法: 获取属性里面的值 getAttribute(“”); 设置属性的值 setAttribute(“”,“”); 删除属性值 removeAttribute(“”);<body&g...
  • zhulin0519
  • zhulin0519
  • 2015-11-13 14:31
  • 428

JavaScript HTML DOM节点类型之Element类型(Element对象)

在HTML DOM中,所有部分都可以认为是节点,Element对象表示 HTML 元素。Element是Document的一个子对象,Element对象接口描述了所有元素所普遍具有的方法和属性, HTML DOM中所有的元素都继承自Element对象。 1....
  • bfboys
  • bfboys
  • 2017-01-11 22:18
  • 811

java中Document类

public interface Documentextends Node Document 接口表示整个 HTML 或 XML 文档。从概念上讲,它是文档树的根,并提供对文档数据的基本访问。 因为元素、文本节点、注释、处理指令等不能存在于 Document 的上下文之外,所以 Doc...
  • u012965373
  • u012965373
  • 2014-09-24 20:16
  • 15790

java中Document类

public interface Documentextends Node Document 接口表示整个 HTML 或 XML 文档。从概念上讲,它是文档树的根,并提供对文档数据的基本访问。 因为元素、文本节点、注释、处理指令等不能存在于 Document&...
  • a4986
  • a4986
  • 2017-04-17 22:46
  • 3402

jquery对象 与 document 对象的互为转换关系

function t1() { var jtest = $('#test'); var dtest = document.getElementById('test'); jtest.css('background...
  • a519640026
  • a519640026
  • 2013-04-16 10:29
  • 10234
    欢迎关注个人微信号
      欢迎关注微信账号:在路上的coder .每天一篇java相关或互联网相关的文章




    个人资料
    • 访问:825963次
    • 积分:2957
    • 等级:
    • 排名:第14098名
    • 原创:87篇
    • 转载:4篇
    • 译文:0篇
    • 评论:26条
    资源分享地址
    个人博客地址
    博客专栏
    最新评论