Javascript中的DOM应用

最新推荐文章于 2019-08-24 15:11:22 发布

zpx138332

最新推荐文章于 2019-08-24 15:11:22 发布

阅读量383

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 文档 html function stylesheet button

本文链接：https://blog.youkuaiyun.com/zpx138332/article/details/6255410

本文介绍了DOM的基本概念、节点类型及如何通过各种方法查找和访问HTML文档中的元素。详细讲解了getElementById、getElementsByTagName、hasChildNodes等方法的应用场景，并通过实例演示了如何获取节点信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript中的DOM应用

DOM：

DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.

D：文档 – html 文档或 xml 文档

O：对象 – document 对象的属性和方法

M：模型

DOM 是针对xml(html)的基于树的API。

DOM树:节点（node）的层次。

DOM 把一个文档表示为一棵家谱树（父，子，兄弟）

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

节点：

根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：

整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点

节点彼此都有等级关系。

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

节点及其类型

* 由结构图中我们可以看到，整个文档就是一个文档节点。

* 而每一个HMTL标签都是一个元素节点。

* 标签中的文字则是文本节点。

* 标签的属性是属性节点。

* 一切都是节点……

节点树

节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个而父亲的就是兄妹关系……

查找并访问节点

你可通过若干种方法来查找您希望操作的元素：

通过使用 getElementById() 和 getElementsByTagName() 方法

通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

getElementsByName()

寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

</form>

function test(){

var tnameArray=document.getElementsByName("tname");

alert(tnameArray.length);

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

window.alert(tnameArray[i].value);

}

//该方法返回是数组类型

var usernameElements=document.getElementsByName("username");

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

//获取元素的类型

//alert(usernameElements[i].type)

//获取元素value的值

//alert(usernameElements[i].value);

//采用函数直接量的方法

usernameElements[i].onchange = function(){

alert(this.value);

}

</script>

getElementsByTagName()

寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。

var elements = document.getElementsByTagName(tagName);

var elements = element.getElementsByTagName(tagName);

该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

var container = document.getElementById(“sid”);

var elements = container.getElementsByTagName(“p”);

alert(elements .length);

/ //处理input

// var inputElements=document.getElementsByTagName("input");

// //输出input标签的长度

// //alert(inputElements.length);

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

// if(inputElements[i].type!='button'){//submit

// alert(inputElements[i].value);

// }

//处理select

// //获取select标签

// var selectElements=document.getElementsByTagName("select");

// //获取select下的子标签

// for(var j=0;j<selectElements.length;j++){

// var optionElements=selectElements[j].getElementsByTagName("option");

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

// alert(optionElements[i].value);

// }

var textareaElements=document.getElementsByTagName("textarea");

alert(textareaElements[0].value);

var inputElements=document.getElementsByTagName("input");

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

if (inputElements.type != 'submit') {

inputElements[i].onchange = function(){

alert(this.value)

};

}

var selectElements=document.getElementsByTagName("select");

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

selectElements[i].onchange=function(){

alert(this.value); }

}

parentNode、firstChild以及lastChild：

这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。

请看下面这个 HTML 片段：

<table>

<tr>

<td>Alaska</td>

</tr>

</table

在上面的HTML代码中，第一个 <td> 是 <tr> 元素的首个子元素（firstChild），而最后一个 <td> 是 <tr>元素的最后一个子元素（lastChild）。

此外，<tr> 是每个 <td>元素的父节点（parentNode）。

var textareaElements=document.getElementsByTagName("textarea");

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

textareaElements[i].onchange = function(){

alert(this.value);

};

}

查看是否存在子节点：

hasChildNodes()

该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串

var selectElements=document.getElementsByTagName("select");

alert(selectElements[0].hasChildNodes())

var inputElements=document.getElementsByTagName("input");

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

alert(inputElements[i].hasChildNodes());

}

有两种特殊的文档属性可用来访问根节点：

document.documentElement

document.body

第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问

DOM节点信息：

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

DOM属性---nodeName

nodeName 属性含有某个节点的名称。

var name = node.nodeName;

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue：返回给定节点的当前值（字符串）

如果给定节点是一个属性节点，返回值是这个属性的值。

如果给定节点是一个文本节点，返回值是这个文本节点的内容。

如果给定节点是一个元素节点，返回值是 null

nodeValue 是一个读/写属性，但不能对元素节点的 nodeValue 属性设置值，

但可以为文本节点的 nodeValue 属性设置一个值。

var li = document.getElementById(“li”);

if(li.firstChild.nodeType == 3)

li.firstChild.nodeValue = “国庆60年”;

nodeType：返回一个整数，这个数值代表着给定节点的类型。

nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：

Node.ELEMENT_NODE ---1 -- 元素节点

Node.ATTRIBUTE_NODE ---2 -- 属性节点

Node.TEXT_NODE ---3 -- 文本节点

nodeType 是个只读属性

下面我門用个简单的案例说明：

问题:

打印 ”明天休息” (利用两种方法)

提示:使用(firstChild lastChild childNodes)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

window.onload = function(){

//通过docuemnt.documentElement获取根节点 ==>html

var root = document.documentElement;

alert(root.nodeName);//打印节点名称 HTML 大写

//获取body标签节点

var body = document.body;

alert(body.nodeName); //body节点的名称也是大写的

//获取body标签中的第一个子节点

var h1 = body.firstChild;

alert(h1.nodeType); //字节点的类型所有的标签都是元素节点

alert(h1.nodeValue);//元素节点的类型值是1

//获取body标签中的最后一个节点

var h1 = body.lastChild;

//节点的名称大写

alert(h1.nodeName);

//节点中的值,

//如果是元素节点(1)的值是Null

//文本节点(3)是文本内容

//属性节点(2)是属性值

alert(h1.nodeValue);

//直接获取body节点

var body = document.body;

//获取body节点的第一个子节点

var h1 = body.firstChild;

//通过id获取节点对象

var str = document.getElementById("h1");

//hasChildNodes()判断此节点是否有字节点如果有则为true否则

为false

var flag = str.hasChildNodes();

alert(flag);

//childNodes:获取该节点的所有字节点的集合

var arr = str.childNodes;

//通过length属性打印节点集合的大小

alert(arr.length);

//通过lastChild获取str节点中的最后一个子节点

var txt = str.lastChild;

//nodeValue节点中的值,

//如果是元素节点(1)的值是null

//文本节点(3)是文本内容

//属性节点(2)是属性值

alert(txt.nodeValue);

/* 标签是元素节点元素节点的nodeValue值是null

那么可以通过以下方式简单获取元素节点中的内容：

通过innerHtml获取元素节点的内容===>原样内容是什么就是什

么

通过innerText获取元素节点的内容===>去掉标签的内容

alert(str.innerHTML);

alert(str.innerText);

// Node nodeName nodeValue nodeType hasChildNodes childNodes

// lastChild firstChild

//理解了DOM的层次关系

}

</script>

</head>

<body>

<h1 id="h1">您好 redarmy</h1>

</body>

</html>