js_DOM操做

时间 2019-11-20

标签 dom 栏目 JavaScript 繁體版

原文原文链接

嗯，大过年的上次更新应该仍是在，大年30前一天，说好的一天更一篇，感受食言了，虽然没有更，可是，天天仍是坚持在学习的，因此今天的任务就是把这几天学的都发上来。javascript

博客，我以为不单单是交流知识的地方，我宁愿把它写成个人生活日记。有差的，欢迎拍砖。html

好了，进入正题吧。java

DOM操做，我以为能够归结成三个，一个标签节点，一个属性节点，一个文本节点。node

这里的数组

li 就是标签节点；app

alt就是属性节点；学习

第一个是文本节点（不是alt里面的）；spa

接下来我将分别用两个例子来解释，这三个点。htm

我先把html放上来：对象

<body>
		<ul>
			<li alt="第一个">第一个</li>
			<li>第二个<br />换行了</li>
			<li>第三个</li>
		</ul>
		<!--<uL id="father"><li>第四个</li><li>第五个</li><li id="tt">第六个</li></uL> 这里我把叠起来，跟下面等会的操做是有区别的-->
		<uL id="father">
			<li>第四个</li>
			<li>第五个</li>
			<li id="tt">第六个</li>
		</uL>
		<button id="dd">点击获取第六个内容</button>
	</body>

标签节点：

window.onload = function(){
			var a = document.getElementById("dd");/*这里就是获取标签节点，获取button按钮，我这里是经过Id，还有其余不少方式，注意一点其余的是类数组*/
			a.onclick = function(){/*点击事件*/
				var d = document.getElementById("tt").childNodes[0].nodeValue;/*获得含有id=“tt”的标签,而后他的字节点，看html，只有“第六个”这几个字，这就是文本节点，nodeValue这个就是其所含的内容*/
				alert(d);/*输出，注意我这里文本节点稍微带了一下*/
			}

                        var por = document.getElementsByTagName("li")/*这是经过标签选择器，获得li标签数组，赋值给por*/
			alert(por.length+" "+por[0].tagName+" "+por[1].childNodes[1].nodeName);/*输出，获得，por[]数组长度，第一个li标签的名字，第二个li的文本节点的内容*/

属性节点,文本节点:

                   /*获得节点*/                   var first = document.getElementsByTagName("li")[0];/*标签选择器获得第一个li标签*/
		   console.log(first.getAttribute("alt"));/*getAttribute（）方法就是获得目标对象的（里面属性）的值*/
		   
		   /*建立节点*/
		   var Pcreate = document.createElement("p");/*建立一个p标签*/
		   var Textcreate = document.createTextNode("我建立了文本节点");/*createTextNode建立文本节点，并赋予内容*/
		   var Attcreate = document.createAttribute("style");/*createAttribute建立属性,建立的属性是style*/
		   Attcreate.value = "color:red";/*赋予属性值*/
		   Pcreate.setAttributeNode(Attcreate);/*setAttributeNode,把建立的属性节点放入建立的p标签里*/
		   Pcreate.appendChild(Textcreate);/*appendchild把建立的文本节点放入p标签里*/
		   document.body.appendChild(Pcreate);/*而后把p标签放入到body*/