首页 > 代码库 > Javascript知识四（DOM）
Javascript知识四（DOM）
O(∩_∩)O~~ 昨天总结了《Javascript知识三》后忘记发布了，呵呵，最近我的忘性很大啊O(∩_∩)O~~，今天是练习，所以把这周还未总结的写下来，和大家一起分享交流。
首先，还是先把function剩下的总结下；
函数的自定义：
例如这道题，是定义一个数组，数组里的属性可以直接赋值，这里的SayHi作为数组的属性来用
<script> var p = { name: "Apphia", age: 20, gender: true, SayHi: function ()
{ //alert(this);//打印出[object Object] return this.name;//这里的this指的是当前数组中的name } };
alert(p.SayHi()); //打印出名字Apphia </script>
DOM(Document Object Model)
DOM中的“D”：文档，如果没有document（文档），Dom就无从谈起。Dom把编写的网页文档转换为一个文档对象
DOM中的"O"：对像，“对象”是一种自足的数据集合，js中的对象可以分为三种：用户定义对象（自行创建的），内建对象（内建在js语言里的对象，如Array,Date等），宿主对象（由浏览器提供的）
DOM中的“M”：模型，含义是某种事物的表现形式。
节点：网络中的一个连接点。一个HTML文档就是一个节点树。在DOM操作中有许多不同类型的HTML标签组成一个个的节点，每一个节点又是一个对象
节点分为三种：
- 元素节点 ：HTML标签
- 文本节点：元素节点里包含的文本
- 属性节点：HTML标签里定义的属性
获取元素：
- 根据标签获取： getElementByTagName() 返回数组
<div><span>歌手</span> 囚鸟 <span>歌名</span></div> <script> var div = document.getElementsByTagName("div"); //根据标签名获取 alert(div.length); //获取长度，这里显示4 for (var i = 0; i < div1.length; i++) { alert(div1[i].innerHTML); //打印出 <span>歌手</span> 囚鸟 <span>歌名</span> } </script>
- 根据name属性获取：getElementsName () 返回数组
<body> <div name="div1">水果</div> <div name="div1">APPLE</div> <script> var div2 = document.getElementsByName("div1");//根据name属性来获取 for (var i = 0; i < div2.length; i++) { alert(div2[i].innerHTML); } // ————————————打印出水果、APPLE </script></body>
- 根据calss属性获取： getElementsByClassName() 返回数组
<div class="div2">鲜花</div> <script> var div = document.getElementsByClassName("div2"); //根据class属性来获取 for (var i = 0; i < div.length; i++) { alert(div[i].innerHTML); } //————————————打印出鲜花 </script>
- 根据元素ID属性获取：getElementById() 返回的是单个值
<div id="div">Wellcome to xxx</div> <script> var divadd = document.getElementById("div") alert(divadd.innerHTML); //打印出Wellcome to xx </script>
- 根据选择器获取querySelector() 返回数组
<div>柳树</div> <script> var div = document.querySelector(".div"); //根据选择器来获取 for (var i = 0; i < div.length; i++) { alert(div[i].innerHTML); } </script>
注：获取文本节点：先抓取元素在去找到文本节点
innerHTML:获取HTML和文本 innerText: 获取纯文本（但只在IE浏览器下使用）
获取属性节点：先抓取元素在去抓取属性 getAttribute（）
<div id="div" class="divclass" name="divname"> <script> var div = document.getElementById("div"); //先获取元素节点 var divAttibute = div.getAttribute("name"); alert(divAttibute); </script>
修改属性节点：setAttribute()
<div id="div" class="divclass" name="divname"> <script> var div = document.getElementById("div");//先获取元素节点 div.setAttribute("name", "MYDIV"); var divAttibute = div.getAttribute("name"); alert(divAttibute); </script>
查看子节点长度,节点类型，节点名称，节点文本内容
<div id="outdiv">外层的DIV <div id="centerdiv">中层的DIV <div id="innerdiv">内层DIV</div> </div> 最后一个空白节点 </div>
<script> var divlengh = div.childNodes.length; //查看子节点长度 var divchild = div.childNodes; alert(divlengh); //查看子节点类型 for (var i = 0; i <divchild.length; i++) { alert(divchild[i].nodeType);//打印出 3 1 3（3：文本节点 1：元素节点） } //查看子节点名称 for (var i = 0; i < divchild.length; i++) { alert(divchild[i].nodeName); } //查看节点文本内容(只显示文本信息，非文本显示NULL) for (var i = 0; i < divchild.length; i++) { alert(divchild[i].nodeValue); } </script>
注：还有常用的 firstchild（第一个字节点） 和 lastchild（最后一个字节点） 两个属性
动态创建节点：
- innerHTML(创建文本元素)
<div id="textdiv"></div> <script> document.getElementById("textdiv").innerHTML = "动态添加"; //打印出 动态添加</script>
- wirte
<div id="div"></div> <script> var divadd = document.getElementById("div"); // write document.write("<p>HELLO</P>"); //动态产生p标签 function inserp() //或封装成方法 { var str = "<p>"; var text = "萨瓦迪卡"; var str1 = "</p>"; return str + text + str1; } document.write(inserp()); //write通常用于大规模处理 </script>
createElement（创建元素节点） createTextNode（创建文本节点） appendChild（追加子节点）
<div id="outdiv">外层的DIV <div id="centerdiv">中层的DIV <div id="innerdiv">内层DIV</div> </div> 最后一个空白节点 </div> <script> var div = document.getElementById("outdiv");//先获取父节点 //追加节点 var p = document.createElement("p"); //1 首先创建元素节点 var text = document.createTextNode("。。。。。。。。。。。。。。。"); //创建一个文本节点 p.appendChild(text);//文本节点追加到父节点 div.appendChild(p);//将元素节点p追加到父节点div中 var adddiv = document.getElementById("div").appendChild("div"); //使用 </script>
O(∩_∩)O~~因为要赶车，所以今天只能先写到这了，剩下的内容下次在继续总结！加油！~~
Javascript知识四（DOM）