Dom 知识点总结
2015-10-01 16:50
555 查看
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。 所有 HTML 元素被定义为对象,其包含对象方法和对象属性。 方法是能够执行的动作(比如添加或修改元素)。 属性是能够获取或设置的值(比如节点的名称或内容)。 HTML DOM 对象 - 方法和属性 一些常用的 HTML DOM 方法: getElementById(id) - 获取带有指定 id 的节点(元素) appendChild(node) - 插入新的子节点(元素) removeChild(node) - 删除子节点(元素) 方法 getElementById() 返回带有指定 ID 的元素。 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 appendChild() 把新的子节点添加到指定节点。 insertBefore() 在指定的子节点前面插入新的子节点。 removeChild() 删除子节点。 replaceChild() 替换子节点。 createAttribute() 创建属性节点。 createElement() 创建元素节点。 createTextNode() 创建文本节点。 getAttribute() 返回指定的属性值。 setAttribute() 把指定属性设置或修改为指定的值。 一些常用的 HTML DOM 属性: innerHTML - 节点(元素)的文本值。获取元素内容的最简单方法是使用 innerHTML 属性,innerHTML 属性对于获取或替换 HTML 元素的内容很有用。 <script> var txt=document.getElementById("intro").innerHTML; document.write(txt); </script> parentNode - 节点(元素)的父节点 childNodes - 节点(元素)的子节点 attributes - 节点(元素)的属性节点 nodeValue 属性规定节点的值。 元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValue 是文本本身 属性节点的 nodeValue 是属性值 <html> <body> <p id="intro">Hello World!</p> <script type="text/javascript"> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body> </html> nodeType 属性返回节点的类型。nodeType 是只读的。 元素类型 NodeType 元素 1 属性 2 文本 3 注释 8 文档 9 访问 HTML 元素(节点)等同于访问节点: 能够以不同的方式来访问 HTML 元素: 通过使用 getElementById() 方法 通过使用 getElementsByTagName() 方法 通过使用 getElementsByClassName() 方法 document.getElementById("main").getElementsByTagName("p"); //返回包含文档中所有 <p> 元素的节点列表,并且这些 <p> 元素应该是 id="main" 的元素的后代(子、孙等等): getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。可以通过下标号访问这些节点(下标号从 0 开始)。如需访问第二个 <p>,您可以这么写:y=x[1]; length 属性定义节点列表中节点的数量,使用 length 属性来循环节点列表: x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br />"); } 查找带有相同类名的所有 HTML 元素,请使用这个方法:document.getElementsByClassName("intro"); 注释:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。 修改 HTML DOM 意味着许多不同的方面: 改变 HTML 内容--->document.getElementById("p1").innerHTML="New text!"; 改变 CSS 样式--->document.getElementById("p2").style.color="blue"; 改变 HTML 属性---->document.getElementById("p1").setAttribute('abc2','abc2');获取-->e.getAttribute('className'); 创建新的 HTML 元素---->先创建该元素(元素节点),然后追加到已有的元素上。 <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("d1"); element.appendChild(para); </script> 删除已有的 HTML 元素---->document.body.removeChild('div');父节点删除其子节点; 找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素: var child=document.getElementById("p1"); child.parentNode.removeChild(child); 替换已有的元素-------->parent.replaceChild(para,child); <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.replaceChild(para,child); </script> 改变事件(处理程序)----> <h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1> <html> <body> <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color" /> </body> </html> 导航节点关系: 使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航,还有: childNodes(返回当前元素的所有子元素的数组); nextSibling(返回紧跟当前元素后面的元素); previousSibling(返回紧跟当前元素之前的元素); hasChildNodes() 返回一个Boolean,指示元素是否有子元素; <html> <body> <p>Hello World!</p> <div> <p>DOM 很有用!</p> <p>本例演示节点关系。</p> </div> </body> </html> 首个 <p> 元素是 <body> 元素的首个子元素(firstChild) <div> 元素是 <body> 元素的最后一个子元素(lastChild) <body> 元素是首个 <p> 元素和 <div> 元素的父节点(parentNode) firstChild 属性可用于访问元素的文本: <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> childNodes 和 nodeValue:除了 innerHTML 属性,也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。 <html> <body> <p id="intro">Hello World!</p> <script> var txt=document.getElementById("intro").childNodes[0].nodeValue; document.write(txt); </script> </body> </html>
相关文章推荐
- 如何创建虚拟硬盘 + os 读取硬盘参数代码
- USACO 2.2 Runaround Numbers
- Hugo探究
- codeforces #256 A. Rewards
- 如何创建虚拟硬盘 + os 读取硬盘参数代码
- LightOJ 1245 Harmonic Number (II)
- zw版【转发·台湾nvp系列Delphi例程】HALCON CropPart
- saltstack随笔
- 黑马程序员----C语言学习笔记之static和extern关键字
- SDUT 1309 不老的传说问题 (区间DP)
- iOS 导出CSV文件(CSVWriter)
- iOS开发实用技术之传感器
- ubuntu安装mysql--参考的网址
- STL之list实现
- JAVA实现矩形覆盖问题(《剑指offer》)
- zw版【转发·台湾nvp系列Delphi例程】HALCON ObjToInteger1-4
- 面向对象初探
- 黑马程序员-----Foundation框架学习之NSString
- 理解JavaScript中的闭包
- 20135234马启扬-——信息安全系统设计基础第三周学习总结