JavaScript中的DOM

. 关于DOM

文档对象模型(DocumentObject Model)，是基于浏览器编程的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla(火狐)的浏览器最与标准接近。

通过 DOM，可以访问所有的 HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

2. 动态改变文档内容

要想对页面的内容做修改，需要如下方式来操作：

? a.解析文档（如HTML）并生成DOM树

? b.通过DOM提供的属性和方法，获取或改变文档的内容

2.1 DOM的节点

HTML 文档中的每个成分都是一个节点（Node）

DOM 是这样规定的：

整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

2.1.1 节点间的关系

节点彼此都有等级关系

父节点、子节点、兄弟节点（同级节点）

2.2 DOM标准接口

W3C提供了三类DOM标准接口,如下：

? a. 核心DOM，适用于各种结构化文档

? b.HTML DOM,专用于HTML文档

c. XML DOM,专用于XML文档

3. 核心DOM操作

3.1 访问节点

访问节点兼容处理

getElement系列方法

使用getElement系列方法来访问指定的节点

getElementById():返回对拥有指定id的第一个对象的引用
getElementsByTagName():返回带有指定名称的对象集合
getElementsByClassName()：返回指定的类选择器的集合
getElementsByName():返回带有指定名称的对象集合(注意不是所有标签都有name属性)

3.1.1 节点信息1

每个节点都拥有包含节点某些信息的属性

nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）

3.1.2 节点信息2

nodeName

元素节点的 nodeName (节点名称)是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

nodeValue

对于文本节点，nodeValue 属性包含文本
对于属性节点，nodeValue 属性包含属性值

nodeType

元素 1 、属性 2、文本 3、注释 8、文档 9
上面不同的数值代表不同的节点类型

3.2 创建和操作节点

3.2.1 主要方法

方法说明

createElement( tagName) 创建一个名为tagName的新元素节点,用法Document.createElement(标签名)

ANode.appendChild( BNode) 把子节点B追加到父节点A里面的末尾

insertBefore( ANode,BNode ) 把A节点插入到B节点之前

Node.loneNode(deep) deep为true则复制该节点以及该节点的所有子节点，为false则只复制该节点和其属性

3.2.2 操作节点的属性

3.3 删除和替换节点

方法说明

removeChild( node) 删除指定的节点(用父级元素去调用它)

replaceChild( newNode, oldNode) 用newNode来替换oldNode（https://www.cnblogs.com/zzq919101/p/6017152.html）

3.3.1 removeChild()示例代码如下

var tb = document.getElementById("tb");
//先找到要删除的节点，这里要删除一行
var tr = tb.lastChild.lastChild;
//这里也需要父节点操作子节点
tr.parentNode.removeChild(tr);???

3.3.2 replaceChild()示例代码

var tb = document.getElementById("tb");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = "我的内容1";
td2.innerHTML = "我的内容2";
tr.appendChild(td1);
tr.appendChild(td2);

//父节点操作子节点
//两个参数，第一个表示新节点，第二个表示旧节点，这里用心节点替换旧节点
tb.lastChild.replaceChild(tr,tb.lastChild.firstChild);??

3.4 其他

id,value等操作

innerHTML和innerText的区别

如果内容中有html标签，使用innerHTML时，内容中的html标签会被解析出来，而使用innerText时，html只会被当作文本显示出来

元素.style.样式

className

3.5 示例

代码1：

结果1：

代码2：

结果2：

代码3：

结果3：

4. HTML DOM操作

? HTML文档中的每个节点，都是DOM对象,每个DOM对象都有属于自己的属性和方法.

? HTML DOM在操作表格时，我们把一个表格看成是一个table对象，那么一个table对象是由若干个行对象（row）组成的，而其中每个行对象又是由若干个单元格对象(cell)组成的

? Table对象可以操作行对象，行对象可以操作单元格对象

4.1 table表格对象

类别名称描述

属性 rows[] 返回包含表格中所有行的一个数组

方法 insertRow() 在表格中插入一个新行

方法 deleteRow() 从表格中删除一行

4.2 row行对象

类别名称描述

属性 cells[] 返回包含行中所有单元格的一个数组

属性 rowIndex 返回该行在表中的位置

方法 insertCell() 在一行中的指定位置插入一个空的<td>标签

方法 deleteCell() 删除行中指定的单元格

另，对于单元格对象，还有cellIndex可以获取单元格的索引号

例如,这里需要在表格的末尾追加一行：

Object 对象

Object 对象表示一个 HTML <object> 元素。

访问 Object 对象

您可以使用 getElementById() 来访问 <object> 元素：

var x=document.getElementById("myObject");

创建 Object 对象

您可以使用 document.createElement() 方法来创建 <object> 元素：

var x=document.createElement("OBJECT");

Object 对象属性

属性	描述
align	HTML5 中不支持。使用 style.cssFloat 替代。设置或返回对象相对于周围文本的对齐方式。
archive	HTML5 中不支持。设置或返回一个用于实现对象存档功能的字符串。
border	HTML5 中不支持。使用 style.border 替代。设置或返回围绕对象的边框。
code	HTML5 中不支持。设置或返回文件的 URL，该文件包含已编译的 Java 类。
codeBase	HTML5 中不支持。设置或返回组件的 URL。
codeType	HTML5 中不支持。
data
declare	HTML5 中不支持。
form	返回对对象的父表单的引用。
height	设置或返回对象的高度。
hspace	HTML5 中不支持。使用 style.margin 替代。设置或返回对象的水平外边距。
name	设置或返回对象的名称。
standby	HTML5 中不支持。设置或返回在加载对象时的消息。
type	设置或返回通过 data 属性下载的数据的内容类型。
useMap
vspace	HTML5 中不支持。使用 style.margin 替代。设置或返回对象的垂直外边距。
width	设置或返回对象的宽度。

标准属性和事件

Object 对象同样支持标准属性和事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

OM操作

节点类型

<p title="remark">备注</p>

节点分为三个类型

元素节点如上述html中的p标签
属性节点如上述html中的title属性，元素节点的属性
文本节点如上述html中的备注，元素节点的子节点

文档加载顺序

html的文档是按照顺序进行加载的，如果将js写在<head>中，获取<body>中节点时会获取不到，使用两种方式来解决这种情况

第一种方式：在<html>之后编写<script>

第二种方式：在<script>中使用window.onload来加载html文档，加载完之后再去获取html中的元素节点就可以获取到

获取节点

获取元素节点

获取id为content的节点，html中需要确保id值唯一

window.onload=function(){
  var content=document.getElementById("content");
}

获取li节点，使用标签名获取节点的集合

var liNodes=document.getElementsByTagName("li");

属于node的方法，可以使用任何节点来调用该方法

var content=document.getElementById("content");
var liNodes=content.getElementsByTagName("li");

根据元素的name属性获取指定的节点集合

var genders=document.getElementsByName("gender");

操作属性节点

通过元素节点 . 的当时来获取和设置

// 获取元素节点
var nameNode=document.getElementById("name");
// 读取属性的值
var value=nameNode.value;
// 设置指定的属性值
nameNode.value="你好";

获取元素节点的子节点

window.onload=function () {
  // 获取city节点
  var city=document.getElementById("city");
  // 获取city节点的所有li子节点
  var cityLiNode=city.getElementsByTagName("li");
  alert(cityLiNode.length);
}

节点的属性

所有的节点都包含有nodeType、nodeName、nodeValue

// 元素节点
var elementNode=document.getElementById("bj");
alert(elementNode.nodeType);  // 元素节点:1
alert(elementNode.nodeName);  // 节点名：li
alert(elementNode.nodeValue); // 元素节点没有nodeValue属性值：null

// 属性节点
var attributeNode=elementNode.getAttributeNode("name");
alert(attributeNode.nodeType); //属性节点：2
alert(attributeNode.nodeName); // 属性节点的节点名：属性名
alert(attributeNode.nodeValue); // 属性节点的nodeValue属性值 ： 属性值

// 文本节点
var textNode=elementNode.firstChild;
alert(textNode.nodeType); //文本节点：3
alert(textNode.nodeName); // 文本节点的nodeName：#text
alert(textNode.nodeValue); // 属性节点的nodeValue ：文本值

创建节点

// 新创建一个元素节点
window.onload=function () {
    // 创建li元素节点
    var liNode=document.createElement("li");
    // 获取需要加入li节点的父节点
    var cityNode=document.getElementById("city");
    // 将li元素节点添加到父节点中
    cityNode.appendChild(liNode);

    // 创建一个文本节点
    var textNode=document.createTextNode("香港");
    // 将文本节点放入li元素节点中
    liNode.appendChild(textNode);
}

删除节点

在线咨询

上一篇：分享一个通用代码-飘窗（兼容各种浏览器）
下一篇：2021年4月自考00900网页设计与制作真题

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商