浅谈DOM（一）

最新推荐文章于 2019-10-24 14:37:48 发布
最新推荐文章于 2019-10-24 14:37:48 发布
阅读量616 收藏
点赞数
分类专栏： javascript 文章标签： DOM javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjzhu1987/article/details/7928118
版权

今天我们来了解下DOM的一些基础知识。

DOM节点

1、childNodes

返回节点的所有子节点的集合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>childNodes</title>
</head>
<body>
	<ul id="ul1">
		<li>111</li>
		<li>222</li>
		<li>333</li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	alert(oUl.childNodes.length);
}
</script>

通过上面的代码，我们发现在ie下子节点个数是3，而在firefox下子节点个数是7，这是为什么呢？后面会告诉原因。

2、nodeType

返回节点的类型（整数）具体数值参考这里：http://www.w3school.com.cn/htmldom/dom_nodes_info.asp

回到刚才的代码，我们来看下ul下的第一个子节点的类型是什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>nodeType</title>
</head>
<body>
	<ul id="ul1">
		<li>111</li>
		<li>222</li>
		<li>333</li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	alert(oUl.childNodes[0].nodeType);
}
</script>

可以看出在ie下返回的是1，也就是元素节点；在firefox下返回的是3，文本节点。

通过上面例子我们可以得到这样的信息，firefox把空格也一起算进去，所以会显示有7个子节点。

那么如何做兼容呢？答案是children

3、children

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>children</title>
</head>
<body>
	<ul id="ul1">
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	alert(oUl.children.length);	//ie => 3，firefox => 3。children可以看做childNodes兼容版
}
</script>

4、parentNode

返回当前节点的父节点，ie和firefox都兼容

例子：点击链接，隐藏整个li

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>parentNode</title>
</head>
<body>
	<ul id="ul1">
		<li>11111 <a href="javascript:;">隐藏</a></li>
		<li>22222 <a href="javascript:;">隐藏</a></li>
		<li>33333 <a href="javascript:;">隐藏</a></li>
		<li>44444 <a href="javascript:;">隐藏</a></li>
		<li>55555 <a href="javascript:;">隐藏</a></li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	var aA = oUl.getElementsByTagName('a');
	
	for(var i = 0; i < aA.length; i++){
		aA[i].onclick = function(){
			this.parentNode.style.display = 'none';
		}
	}
}
</script>

5、首尾子节点（有兼容问题）

firstChild  //for ie

firstElementChild //for firefox

返回节点的第一个子节点

lastChild  //for ie

lastElementChild //for firefox

返回节点的最后一个子节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>firstChild和firstElementChild</title>
</head>
<body>
	<ul id="ul1">
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementById('ul1');
	
	//oUl.firstChild.style.background = 'red';	//for ie
	//oUl.firstElementChild.style.background = 'red';	//for firefox
	
	//for ie and firefox
	var oFirst = oUl.firstElementChild || oUl.firstChild;
	oFirst.style.background = 'red';
}
</script>

6、兄弟节点（有兼容问题）

nextSibling  //for ie

nextElementSibling //for firefox

返回节点的后一个兄弟节点

previousSibling  //for ie

previousElementSibling //for firefox

返回节点的前一个兄弟节点


PS：博客搬家了，以后不再 CSDN 更新了，见谅。最新博客地址：http://www.cnblogs.com/yjzhu/

athrunzero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM的理解与认知
xibozi的博客
12-28 997
文档对象模型 ，即是Documet Object Model 是W3C组织提出的一种规范 用W3C组织的话来说，DOM其实就是一种允许程序或者脚本动态地访问更新文档内容结构和样式的 独立于平台金额语言的规范借口 说白一点dom就是规范 只要符合这种规范的文档就可以在 程序中引用其内容 ，还可以进行修改 ，这一点给文档的处理带来了相当大的灵活性 在Java script 改变文档内容 的语句就...
九型人格 （性格型态学）
y1019992884的博客
11-13 2万+
1.人格被分为九型，你必然属于其中一型。而这个型就是你的基本人格型态。一个人的基本人格类型是不会变的，即使在现实生活中，因为某些因素，而有了种种变化，但即使你的基本人格型态可能有某部份的隐藏或是调整，却不会真正改变。 2.虽然人的基本性格型态是不会改变，但是某一型的典型描述，却不见全然符合某一个人，原因正是上面说过的：人们为了顺应成长环境、社会文化，他们在安定或压力的情况下，有可能出现一些差异。...
DOM操作一览
sinat_37186459的博客
04-01 147
理解DOM： DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。 一、 怎么说，我从两个角度理解： 对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。 对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。 ...
JavaScript--浅谈DOM操作
山鬼谣弋痕夕的博客
08-10 194
JavaScript之浅谈DOM操作 https://www.cnblogs.com/Ry-yuan/p/6918155.html 1.理解DOM： 　　DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。 　　怎么说，我从两个角度理解： 对于JavaScript，为了能够使JavaScript操作Html，Ja...
什么是DOM（个人理解）
热门推荐
小白博客
07-22 3万+
了解DOM需要清楚几个问题： 什么是DOM？ DOM可以用来干什么？ DOM是怎么来的？ 怎么使用DOM？     什么是DOM?  DOM(document Object Model）,是针对HTML和XML的API。 可以理解为DOM就是一系列功能集合。 DOM可以用来干什么？  理解了DOM是API，就知道它就是一些功能，通过这些功能可以对HTML文档进行动态操...
Javascript的DOM操作
GOD_CHONG的专栏
12-16 639
前言     在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望看完全文,你能知道如何更高效的通过原生js以及jQuery操作DOM元素.     操作DOM     这里我希望介绍的相对系统一点,而不是东一句西一句,所以把J
浅谈javascript中的DOM方法
10-23
DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值...
浅谈DOM的操作以及性能优化问题-重绘重排
08-31
下面小编就为大家带来一篇浅谈DOM的操作以及性能优化问题-重绘重排。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈jQuery 选择器和dom操作
10-22
下面小编就为大家带来一篇浅谈jQuery 选择器和dom操作。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈React的最大亮点之虚拟DOM
08-27
主要介绍了浅谈React的最大亮点之虚拟DOM,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript学习记录——Dom操作就是html中元素操作的理解
YENTERTAINR的博客
10-24 359
1. JavaScript初始: 1.1浏览器执行JS简介： ···浏览器分成两部分：渲染引擎呵JS引擎 渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit JS引擎：也称为JS解释器。用来读取网页中的Javascript代码，对其处理后运行。比如chrome浏览器的v8 浏览器本身不会执行JS代码，而是通过内置的JavaScr...
DOM的理解和操作
weixin_34208185的博客
07-27 120
什么是DOM？ Document Object Model的缩写，就是以层次化的模式来描述网页的方式。 Document就是指文档（网页文件） Object是指把网页文档看做一个整体 Model模型模式 关于DOM DOM是针对HTML和XML文档的一个API（应用程序程序接口）。 DOM描绘了一个层次化的节点树（节点关系）。 ...
JavaScript之浅谈DOM操作（了解DOM）
样young的博客
04-28 439
本文转载自：http://www.cnblogs.com/Ry-yuan/p/6918155.html1.理解DOMDOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作XML，HTML文档的应用编程接口。对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。对于HTML，DOM使得HTML形...
图片左右滚动（可自动，有左右按钮）
朱羽佳
07-25 1万+
图片左右滚动（可自动，有左右按钮） html代码如下： 图片滚动 *{margin:0;padding:0;} ul{list-style:none;} img{border:0;} .scroll{width:358px;height:63px;} .scroll_left{width:23px;height:63px;background:url(images
文字或图片上下滚动
朱羽佳
07-24 2245
html代码如下： 文字或图片上下滚动 ul{height:210px;overflow:hidden;} li{line-height:20px;} 1111111111 2222222222 3333333333 4444444444 5555555555 6666666666 7777777777 8888888888 9
如何让javascript支持getElementsByClassName
朱羽佳
03-26 2216
我们知道，在javascript中有几种DOM方法可以获取元素的节点，常用的有getElementById，getElementsByName，getElementsByTagName。但是我们在写页面时，用的最多的还是class，而javascript中缺没有getElementsByClassName方法，很让人纠结（在html5中已经可以使用该方法）。 下面我们就通过已有的DOM方法来写个
数组对象常用API
朱羽佳
10-09 1247
concat() 连接两个或多个数组，并返回结果 var a = [1,2,3]; var b = a.concat(6,7); console.log(a);  //[1,2,3] console.log(b);  //[1,2,3,6,7] join(str) 把数组的所有元素用str分隔，默认逗号分隔 var a = [1,2,3] var b = a.join('
String对象常用API
朱羽佳
10-09 984
concat(str1,str2,···) 连接字符串 indexOf(str,start) 返回 str 在字符串中首次出现的位置 var str = "hello world"; str.indexOf("hello");  // 0 str.indexOf("o",5);  // 7 str.indexOf("World");  // -1 lastIndexOf(str,
Ajax基础
朱羽佳
09-18 832
今天我们来了解下Ajax 什么是Ajax Ajax即“Asynchronous JavaScript and XML”（异步JavaScript和XML）。说白了就是无刷新数据读取。 HTTP请求 首先我们需要了解下HTTP请求的方法（GET和POST） GET——用于获取数据（如：浏览帖子） GET是在url里传数据，它的安全性低，容量低 POST——用于上传数据（如：用户注册
浅谈一下react异步
最新发布
04-16
2. 合并多次setState()调用：使用React提供的批量更新机制，可以将多次setState()的调用合并成一次，减少更新次数。 3. 使用PureComponent或shouldComponentUpdate方法：这些方法可以通过比较前后props和state的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值