HTML DOM

最新推荐文章于 2022-10-15 18:07:45 发布

yggblog

最新推荐文章于 2022-10-15 18:07:45 发布

阅读量155

点赞数

分类专栏：前端文章标签： html 标准

本文链接：https://blog.csdn.net/yggblog/article/details/78118241

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

                       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-文档的主体

yggblog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM

HTML DOM 1.首先： DOM 是W3C的标准，定义了访问HTML和XML文档的标准。 2.W3C DOM标准被分成3个不同的部分： &gt;核心DOM &gt;XML DOM &gt;HTML DOM 3.最主要就是介绍HTML DOM ：定义了所有HTML元素的对象和属性，以及访问他们的方法。 &gt;HTML的标准对象模型...
复制链接

扫一扫

专栏目录