文章标题

来源：互联网发布：centoa安装java 7u80 编辑：程序博客网时间：2024/05/21 09:55

                       HTML DOM  1.首先： DOM 是W3C的标准，定义了访问HTML和XML文档的标准。 2.W3C DOM标准被分成3个不同的部分： >核心DOM >XML DOM >HTML DOM 3.最主要就是介绍HTML DOM ： 定义了所有HTML元素的对象和属性，以及访问他们的方法。 >HTML的标准对象模型 >HTML的标准编程接口 >W3C标准 4.HTML DOM 方法： >getElementById(id) :获取带有指定id的元素 >getElementByTagName():返回包含带有指定标签名称的所有元素的节点列表 >appendChild(node)  :插入新的子元素 >removeChild(node)  :删除子元素 >getElementByClassName():返回带有指定类名的所有元素的节点列表 5.HTML DOM属性 >innerHTML:元素的文本值 >parentNode:元素的父节点 >childNodes:元素的子节点 >attributes:元素的属性节点 6.HTML DOM :元素 <添加，删除，替换HTML元素>  >1.创建新的HTML元素--appendChild()  >实例：     <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 element=document.getElementById("div1"); element.appendChild(para); </script> >2.追加前后顺序：insertBefore() >实例：   <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 element=document.getElementById("div1");var child=document.getElementById("p1");element.insertBefore(para,child);//把para的内容追加在通过id来获p1信息的child这个变量前面，显示出来。</script>>3.删除已有的HTML元素（必须清楚该元素的父元素）>实例：   <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p></div><script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);//调用removeChild()方法，通过访问id来利用新建的变量child来承载他的内容。然后变量parent直接移除child的内容即可。</script>>4.替换HTML元素：replaceChild()方法>小窍门：和insertBefore()方法相似，只不过一个是追加，一个是替换。7.HTML DOM ----导航

1.HTML DOM 节点列表
getElementsTagName()方法返回的是节点列表，节点列表是一个节点数组。
2.HTML DOM节点列表中节点的数量。（使用length属性来循环节点列表）
实例：（for循环遍历节点列表）

  x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br />"); //获取所有<p>元素节点//输出每个<p>元素的文本节点的值 } >3.导航节点关系

实例：

  <html> <body> <p id="intro">Hello World!</p> <script>   x=document.getElementById("intro");  document.write(x.firstChild.nodeValue); </script> </body> </html> >4.DOM根节点 >特殊属性： 1.document.documentElement--全部文档  2.document.body-文档的主体

阅读全文

0 0