javascript小结之DOM

javascript中的DOM指的是文档对象模型,之前说的BOM是指浏览器对象模型,DOM是针对HTML和XML文档的API(应用程序接口)。

(一)DOM介绍

1、节点

在HTML DOM中,文档中的每个部分都是节点:文档本身是文档节点,所有的HTML元素是元素节点,所有HTML属性是属性节点,HTML元素内的文本是文本节点,注释是注释节点。

2、节点的种类

(1)元素节点:就是标签,比如<div></div>、<p></p>等。

(2)文本节点:就是标签内的纯文本,比如由段落标签<p>段落内容</p>所包括的里面的段落内容。

(3)属性节点:就是标签的属性,比如<div id="footer"></div>中的id=footer。

(二)查找元素

元素节点方法
方法
说明
getElementById()
获取特定ID元素的节点
getElementsByTagName()
获取相同元素的节点列表
getElementsByName()
获取相同名称的节点列表
getAttribute()
获取特定元素节点属性的值
setAttribute()
设置特定属性节点属性的值
removeAttribute()
移除特定元素节点属性

1、getElementByID()方法

使用getElementByID()方法,接受一个参数,获取元素的节点,如果找到相应的元素则返回该元素的HTMLDivElement对象,如果不存在,则返回null。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script type="text/javascript">
	alert(document.getElementById("div01"));
</script>
</head>
<body>
	<div id = "div01">div0001</div>
</body>
</html>

注意上面的这段代码,打开该页面的时候,弹出的值是null。主要是由于代码执行顺序的问题,无关是否存在指定ID标签,默认返回null。解决方法,可以把<script>代码移到文档末尾,也可以使用onload事件来处理,使用onload可以实现当整个html加载完毕以后再执行onload中的代码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script type="text/javascript">
	window.onload = function() {
		alert(document.getElementById("div01"));
	};
</script>
</head>
<body>
	<div id="div01">div0001</div>
</body>
</html>

如上所示,上面这段代码的返回值就是:[object HTMLDivElement]。

还有个地方需要注意的是,id表示的是一个元素节点的唯一性,不能同时给两个或两个以上的元素节点同时设置id为一样的。所以,尽量不要设置一样的ID。

2、getElementsByTagName()方法

getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList),这个数组保存着所有相同元素名的节点列表。用法都很类似,不一样的是返回的不是一个元素,而是一个元素的数组,别的都差不多。注意,不管是getElementById()还是getElementsByTagName(),在传递参数的时候,并不是所有浏览器都必须区分大小写,为了防止不必要的错误和麻烦,应该按照规范来,养成区分大小写的习惯。

3、getElementsByName()方法

getElementsByName()方法可以获取相同名称( name)的元素,返回一个对象数组HTMLCollection(NodeList)。注意,对于并不是HTML合法的属性,那么在JS获取的时候兼容性上会存在差异。

4、getAttribute()方法

getAttribute()方法将获取元素中某个属性的值,它跟直接使用属性获取属性值的方法有些区别,如果直接使用属性,那么对于用户自定义的属性,有些浏览器不支持获取,而返回undefined,建议还是使用getAttribute()方法,主要还是出于浏览器兼容性考虑。

5、setAttribute()方法

setAttribute()方法设置元素中某个属性和值,它需要传递两个参数:属性名和值,如果属性本身已经存在,那么它就会被覆盖。

(三)DOM节点

1、node节点属性

前文提到节点分为元素节点、属性节点、文本节点,而这三个结点又有三个非常有用的属性:nodeName、nodeType和nodeValue。

node节点属性
节点类型
nodeName
nodeType nodeValue
元素节点 元素名称
1
null
属性节点
属性名称
2
属性值
文本
#text
3
文本内容(不包含html)

2、层次节点属性

节点的层次结构可以分为父节点与子节点、兄弟节点这两种,当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点。

层次节点属性
属性
说明
childNodes
获取当前元素节点的所有子节点
firstChild
获取当前元素节点的第一个子节点
lastChild 获取当前元素节点的最后一个节点
ownerDocument
获取该节点的文档根节点,相当于document
parentNode
获取当前节点的父节点
previousSibling
获取当前节点的前一个同级节点
nextSibling
获取当前节点的后一个同级节点
attributes
获取当前元素节点的所有属性节点集合

上面的一些属性列本文就列出来,具体的用法可以参见w3school。

本文标题:javascript小结之DOM

本文链接:http://yedward.net/post/256.html

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

本博客不提供评论功能,有任何问题请发送邮件至:yedward92@qq.com

相关文章