首页 > 代码库 > DOM的学习
DOM的学习
今天学习了DOM，感觉学习起来真的没那么简单啦，这不是一个好现象啊，只有依靠自己大补课，嘿嘿，具体的总结了一下，今天学习的其实并不多，仅仅学习了不同的节点类型，但是知识还是蛮碎的，要一点一点的总结，昨天学习的是javascript中的引用类型，也是碎的知识点，而我仅仅总结了具体的类型和其中有关的方法，并没有详细的总结其使用的方法，由于时间都浪费在了看书上面，我感觉我不喜欢什么也不问的去掌握这个知识点，更倾向于系统的学习，然后知道它的具体使用方法和联系，所以还是更希望有一本可以给我方向的javascript书。
一.Node类型
<body> <div id="outerdiv">我是外层DIV313 <div id="centerDiv"> 我是中层DIV <div id="innerDiv">我是内层div</div> 内层div结束 </div> 我是最后一个空白节点 </div> <script> var outchildnode = document.getElementById("outerdiv");//首先获取父节点div for (var i = 0; i < outchildnode.childNodes.length; i++) { alert(outchildnode.childNodes[i].nodeValue); //仅仅遍历出了父节点的子节点的值，而子节点的子节点则显示为null } alert(childnode.firstChild.nodeType); //nodeType在这里是输出节点的类型,1表示的是元素节点；2表示的是实行节点；3表示的是文本节点 alert(childnode.firstChild.nodeValue); //获取div的第一个节点，在这里需要注意的是子节点包括文本、元素和属性节点，所以第一个即是文本节点，而nodeVaule是现实节点的值 alert(childnode.lastChild.nodeName); //获取的是最后一个节点,nodeName显示的是文本节点#text </script></body>
说起来node类型，在这里主要举例说明了nodeType和nodeValue、nodeName，其实这三个属性看起来还是蛮容易记得的，但是在使用起来在细节上面还是要注意的，nodevalue仅仅遍历出了父节点的下一个节点的值，和子节点的子节点没有关系等，这三个属性使用起来还是要细心的。
二.Document类型
<body> <p> hello world p标签1 </p> <p> hello world p标签2 </p> <p id="p">Hello</p> <p>Tom</p> <p>Cruise</p> <input type="text" name="txtname" value=http://www.mamicode.com/"123 " /> <input type="password" name="txtname" value=http://www.mamicode.com/"345" /> <div class="div"> Hello World div </div> <div class="div"> Hello World div </div> <div> Hello World </div> <script> var p = document.getElementsByTagName("p"); //在这里使用getElementsByTagName方法的参数是一个标签元素，我们主要是通过p标签来获取元素的 alert(p.length); //当打印长度都即可知道存在p标签元素 </script> <script> var pname = document.getElementById("p"); //通过id获取html中的元素 alert(pname.innerHTML); //把内容显示在信息框中 </script> <script> var classname = document.getElementsByName("txtname"); for (var i = 0; i < classname.length; i++) { //通过元素的属性名字获取元素 alert(classname[i].value) //显示值 } </script> <script> var v = document.getElementsByClassName("div");//类选择器的名字 for (var i = 0; i < v.length; i++) { alert(v[i].innerHTML); } </script> <script> var r = document.querySelector(".div"); //参数为选择器 for (var i = 0; i < r.length; i++) { alert(r[i].innerHTML); } </script></body>
<script> function insertP(text) { var str = "<p>"; str += text; str += "</p>"; document.write(str); } </script>
<body> <p id="ppp">p标签</p> <script> alert(document.write("<p>我是动态的P标签</p>")); //可以使用write动态添加一个p标签，但是一般把它封装为一个方法，适用于多次添加同一元素的内容 for (var i = 0; i < 5; i++) { insertP("我是动态的P标签"); //连续插入该文本信息5次 } </script></body>
总结Document类型，我想说的是在这里首先总结了获取元素的几种方式，可以通过其元素的名称，id名称等，在上面的最后一种方式之前是存在的，但是现在似乎不能使用了，我目前还不知，然后是方法write的使用，即文档写入，而write方法可以原样输出，这个类型使用起来还是容易记得的，嘿嘿。
三.Element类型
<body> <div id="div" class="divclass" name="divname"> <script> //var div = document.getElementById("div"); //获取div元素 //var divattribute = div.getAttribute("class"); //通过getAttribute获取div元素中的属性 //alert(divattribute); var setattribute = div.setAttribute("name", "divdiv"); // 接受两个参数，第一个为要设置的特性名，第二个为设置的值 alert(div.getAttribute("name")); var remove = div.removeAttribute("name"); //彻底删除元素特性的值，而且也会从元素中删除特性 alert(div.getAttribute("name")); //当显示null时间说明已经删除该特性 </script></body>
在这里，我刚开始一直是写的alert（setattribute ），然后提示未定义，感觉还是蛮奇怪的，那时间就误把它当做一个变量,认为输出即可，还是太天真了，其实根本就却不是这样的，具体的应该是设置完新的值后需要获取元素的值，并不能直接输出，在一友友的帮助下反应过来啦，嘿嘿，这样的写法其实只能归于自己不熟悉，方法的使用都不知道，希望下次能够我注意。而在这里关于Element类型主要是取得元素特性和获取元素特性，甚至可以清除元素的特性。
var p = document.createElement("p"); //创建新元素
<body> <div id="div">div元素</div> <script> var p = document.createElement("p"); //创建新元素 var doc = document.createTextNode("我是text元素");//创建文本元素 p.appendChild(doc); //追加子节点 document.getElementById("div").appendChild(p); //把p标签添加到div元素中 </script></body>
这里是创建新元素，嘿嘿，还是可以动态的添加元素的子节点的。前面用到Element的方法如果使用熟练，那么在这里就可以简单的练习下即可，这里还是很好理解的。
四.其他类型
其他类型还有Text类型、Comment类型、CDATASection类型、DocunmentType类型、DocunmentFragment类型和Attr类型等，而上面的一个例子中写的，创建文本元素，是属于Text类型的，现在的我们仅仅简单的学会创建文本节点即可，其他的类型我也只是了解。
嘿嘿，今天就写到这里，还有好多小知识点没有很熟练的掌握，到今天为止学习javascript已经是四天，感觉学的还是蛮多的，记得周一仅仅知道了javascript的存在（http://www.cnblogs.com/dyxd/p/4204278.html）；周二讲的是基本概念：语法、关键字、数据类型、操作符以及一些语句的使用（if、if...else..、while、do...while、for以及for...in等）；周三讲的就是引用类型（http://www.cnblogs.com/dyxd/p/4204278.html）；今天的内容就是DOM,在四天的时间里面学习的东西还是蛮多的，不过最重要的是我要一点一点的消化。学习是一个循序渐进的过程，也是1=1的开始与结束，相信努力一定会有不一样的结果的。
DOM的学习