文档对象模型（DOM）

最新推荐文章于 2024-08-23 08:48:30 发布

原创最新推荐文章于 2024-08-23 08:48:30 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#文档对象模型

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

DOM（Document Object Model）：文档对象模型，它定义了访问和处理HTML文档的标准方法，允许程序和脚本动态地访问和更新文档的内容、结构和样式。

一. DOM节点：

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

这里写图片描述

节点父、子和同胞：

这里写图片描述

二. 获取节点对象的方法：

1.. getElementsByName(name)
返回带有指定名称的节点对象的集合

var element=document.getElementsByName("alink");

2.. getElementById(ID)
返回带有指定 ID 的元素对象

var element=document.getElementById("header");

3.. getElementsByTagName(tagname)
返回带有指定标签名的节点对象的集合，返回元素的顺序是它们在文档中的顺序。

var element= document.getElementsByTagName("input")

4.. getElementsByClassName(classname)
返回包含带有指定类名的节点对象的集合

var element= document.getElementsByClassName("alink")

三. 节点的属性：

nodeName 属性: 节点的名称，是只读的。
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 是属性的名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
nodeValue 属性：节点的值
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本自身
- 属性节点的 nodeValue 是属性的值
nodeType 属性: 节点的类型，是只读的。
常用的几种结点类型:
元素类型–节点类型
元素 ———1
属性———-2
文本———-3
注释———-8
文档 ———9
innerHTML属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用，它在JS是双向功能：获取对象的内容或向对象插入内容
如：<div id="aa">这是内容</div> ，我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。

对节点属性的两种操作：
1.. getAttribute()方法
通过元素节点的属性名称获取属性的值。

 //获取li节点的title属性的值
 var con=document.getElementsByTagName("li");
 var text = con.getAttribute("title")

2.. setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

 //将li节点title属性的值设为“哈哈哈”
 var con=document.getElementsByTagName("li");
 var text = con.setAttribute("title","哈哈哈")

四. 增删节点：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type">
<title>无标题文档</title>
</head>
<body>

<ul id="test">
  <li>JavaScript</li>
  <li>css</li>
  <li>HTML</li>
</ul> 

<script type="text/javascript">

</script> 

</body>
</html>

1.. 插入节点

appendChild（）在指定节点的最后一个子节点列表之后添加一个新的子节点。

//在li列表后加入新的li选项“PHP”
  var otest = document.getElementById("test");  //获取节点列表
  var newnode = document.createElement("li"); //注意先创建这个节点
  newnode.setAttribute("style","color: red;");  //setAttribute方法设置节点属性
  newnode.innerHTML="PHP"  //添加节点文本
  otest.appendChild(newnode)  //节点列表之后添加新的节点

insertBefore(newnode,node) 方法可在已有的子节点前插入一个新的子节点

  //最后一个节点之前加入新的li选项“PHP”
  var otest = document.getElementById("test");  
  var node= otest.lastChild;   //取到标志节点
  var newnode = document.createElement("li"); //注意先创建这个新节点
  newnode.innerHTML="PHP";  //添加新节点文本
  otest.insertBefore(newnode,node);  //标志节点之前添加新的节点

2.. 删除节点

removeChild（）方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

//删除第一个节点
var otest = document.getElementById("test");   //父结点
otest.removeChild(otest.childNodes[1]);  //删除子节点

3..替换元素节点

replaceChild（）实现子节点(对象)的替换。返回被替换对象的引用。

    var otest = document.getElementById("test");
    newnode=document.createElement("li");  //先创建新节点
    newnode.innerHTML="PHP"  //添加节点文本
    otest.replaceChild(newnode,otest.childNodes[1]); //替换