Document对象(一)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/Nice_Nice_Nice/article/details/100070760

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对象的一个案例:
在一个

    标签下创建一个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>
    

    猜你喜欢

    转载自blog.csdn.net/Nice_Nice_Nice/article/details/100070760