Document对象（一）

最新推荐文章于 2021-05-18 16:05:09 发布

Sun了个晒丶

最新推荐文章于 2021-05-18 16:05:09 发布

阅读量131

点赞数

本文链接：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>