html文档查找元素的常用方法,DOM

DOM 简介

DOM 是 Document Object Model(文档对象模型)的缩写。

DOM 是 W3C(万维网联盟)的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

HTML中的DOM操作

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点(元素)

appendChild(node) - 插入新的子节点(元素)

removeChild(node) - 删除子节点(元素)

一些常用的 HTML DOM 属性：

innerHTML - 节点(元素)的文本值

parentNode - 节点(元素)的父节点

childNodes - 节点(元素)的子节点

attributes - 节点(元素)的属性节点

查找节点：

getElementById() 返回带有指定 ID 的元素。

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

增加节点：

createAttribute() 创建属性节点。

createElement() 创建元素节点。

createTextNode() 创建文本节点。

insertBefore() 在指定的子节点前面插入新的子节点。

appendChild() 把新的子节点添加到指定节点。

删除节点：

removeChild() 删除子节点。

replaceChild() 替换子节点。

修改节点：

setAttribute()  修改属性

setAttributeNode()  修改属性节点

实例1：增加p标签

/*动态添加 :

文本

*/

function dianwo(){

var div = document.getElementById("div1");

//创建元素节点

var p = document.createElement("p"); //

//创建文本节点

var textNode = document.createTextNode("文本内容");// 文本内容

//将p 和文本内容关联起来

p.appendChild(textNode); //

文本

//将P添加到目标div中

div.appendChild(p);

}

View Code

实例2：省市联动

/*

准备工作 : 准备数据

*/

var provinces = [

["深圳市","东莞市","惠州市","广州市"],

["长沙市","岳阳市","株洲市","湘潭市"],

["厦门市","福州市","漳州市","泉州市"]

];

/*

1. 确定事件: onchange

2. 函数: selectProvince()

3. 函数里面要搞事情了

得到当前操作元素

得到当前选中的是那一个省份

从数组中取出对应的城市信息

动态创建城市元素节点

添加到城市select中

*/

function selectProvince(){

var province = document.getElementById("province");

//得到当前选中的是哪个省份

//alert(province.value);

var value = province.value;

//从数组中取出对应的城市信息

var cities = provinces[value];

var citySelect = document.getElementById("city");

//清空select中的option

citySelect.options.length = 0;

for (var i=0; i < cities.length; i++) {

// alert(cities[i]);

var cityText = cities[i];

//动态创建城市元素节点 东莞市

//创建option节点

var option1 = document.createElement("option"); //

//创建城市文本节点

var textNode = document.createTextNode(cityText) ;// 东莞市

//将option节点和文本内容关联起来

option1.appendChild(textNode); //东莞市

// 添加到城市select中

citySelect.appendChild(option1);

}

}

--请选择--

广东省

湖南省

福建省

View Code