DOM小结

最新推荐文章于 2020-07-15 09:47:12 发布
最新推荐文章于 2020-07-15 09:47:12 发布
阅读量445 收藏
点赞数
分类专栏： js小结 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/somous_ly/article/details/38367187
版权

一、定义

dom - - -  Document Object Model (文档对象声明)

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换句话说咱们可以利用dom对HTML元素进行获取，修改，添加，删除等操作。

二.知识点小结
1.childNodes (该属性能返回当前节点的子节点列表) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom1</title>
	<style>
		li{
			height: 30px;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<ul id="uls">
		<li></li>
		<li></li>
	</ul>
</body>
<script>
	var uls = document.getElementsByTagName("ul")[0];
	alert(uls.childNodes.length)
</script>
</html>
Dom小结 - 淡淡De影痕 - 淡淡De影痕的博客
 这个是在Chrome中运行的结果，能看到ul中包涵5个子节点（3个文本节点，2个元素节点）。
2.nodeType （该属性返回节点类型）

Dom小结 - 淡淡De影痕 - 淡淡De影痕的博客 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom1</title>
	<style>
		li{
			height: 30px;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<ul id="uls">
		<li></li>
		<li></li>
	</ul>
</body>
<script>
	var uls = document.getElementsByTagName("ul")[0];
	for(var i = 0; i <= uls.childNodes.length; i++){
		console.log(uls.childNodes[i].nodeType)
	}
	// nodeType  -->3文本节点
	// nodeType  -->1元素节点
</script>
</html>
咱们来看看ul下有哪些节点。
Dom小结 - 淡淡De影痕 - 淡淡De影痕的博客

3.children (该属性返回当前节点中的子元素----不包含文本节点) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom1</title>
	<style>
		li{
			height: 30px;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<ul id="uls">
		<li></li>
		<li></li>
	</ul>
</body>
<script>
	var uls = document.getElementsByTagName("ul")[0];
	for(var i = 0 ; i <= uls.children.length ; i++){
		uls.children[i].style.background = "red";
	}
</script>
</html>
4.parentNode（返回指定节点的父节点） 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom1</title>
	<style>
		li{
			height: 30px;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<ul id="uls">
		<li></li>
		<li></li>
	</ul>
</body>
<script>
	var uls = document.getElementsByTagName("ul")[0];
	alert(uls.parentNode)
</script>
</html>
Dom小结 - 淡淡De影痕 - 淡淡De影痕的博客
 
 5.offsetParent (返回指定元素进行定位的父元素) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom3</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#main{
			position: relative;
			width: 200px;
			height: 200px;
			background: red;
			
		}

		#box{
			position: absolute;
			top: 100px;
			left: 100px;
			width: 50px;
			height: 50px;
			background: #000;
			
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="box">
			
		</div>
	</div>
</body>
<script>
	// offsetParent属性会根据不同的定位显示不同的父级元素（与元素的绝对定位和相对定位有关）
	var box = document.getElementById("box")
	alert(box.offsetParent)
</script>
</html>
Dom小结 - 淡淡De影痕 - 淡淡De影痕的博客
 当我们为box的父元素main设置position:relative后，能看到弹出的是div（main）。咱们去掉main的相对定位再看看结果。
Dom小结 - 淡淡De影痕 - 淡淡De影痕的博客
去掉main的position后，box相对于body进行定位所以弹出的是Body。
6.firstChild （返回被选节点的第一个子节点）
兼容问题：
ie6~8  ：                    firstChild
其他高大上浏览器：firstElementChild
兼容性写法： 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom4</title>
</head>
<body>
	<ul id="uls">
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
<script>
	var uls = document.getElementById("uls");
	if(uls.firstElementChild){
		uls.firstElementChild.style.background = "red";
	}else{
		uls.firstChild.style.background = "red";
	}
</script>
</html>
7.lastChild（返回被选节点的最后一个子节点）
兼容问题：
    ie6~8：    lastChild
       其他高大上浏览器：lastElementChild
lastChild用法同上，这里就不过多赘述了。
8.nextSibling（返回被选节点的下一个同级节点）
兼容问题：
       ie6~8：    nextSibling
       其他高大上浏览器：nextElementSibling
用法同上。
9.previousSibling（返回被选节点的上一个同级节点）
兼容问题：
       ie6~8:    previousSibling
       其他高大上浏览器：previousElementSibling
用法同上。
10.setAttribute（创建或改变某个新属性）
      setAttribute(名称，值) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom5</title>
</head>
<body>
	<input type="text" id="btn1" />
	<input type="button" value="按钮" id="btn2" />
</body>
<script>
	var btn1 = document.getElementById("btn1");
	var btn2 = document.getElementById("btn2");
	btn2.onclick = function(){
		btn1.setAttribute("value","1234");
	}
	// 获取：getAttribute(名称)
	// 设置：setAttribute(名称，值)
	// 删除：removeAttribute(名称)
</script>
</html>
11.getAttribute(通过名称获取属性的值)
getAttribute(名称)
用法同上。
12.removeAttribute（通过名称删除属性值）
 removeAttribute（名称）
用法同上。
13.createElement（创建元素节点）
    createElement（元素名称） 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul id="uls">	
	</ul>
	<input type="button" value="创建li" />
</body>
<script>
	var uls = document.getElementsByTagName("ul")[0];
	var btns = document.getElementsByTagName("input")[0];
	btns.onclick = function(){
		var lis = document.createElement("li");
		uls.appendChild(lis);
	// 父级.appendChild(创建的元素);
	}
</script>
</html>
14.appendChild(指定元素节点的最后一个子节点之后添加节点)
     父级.appendChild(插入的节点)
使用方法见上例。
15.insertBefore（在已有的子节点前插入一个新的子节点）
    父级.insertBefore(新的子节点 , 在谁之前) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" />
	<input type="button" value="插入元素" />
	<ul>		
	</ul>
</body>
<script>
	var txt = document.getElementsByTagName("input")[0];
	var btn = document.getElementsByTagName("input")[1];
	var uls = document.getElementsByTagName("ul")[0];
	btn.onclick = function(){
		var lic = document.createElement("li");
		var lis = document.getElementsByTagName("li");
		lic.innerHTML = txt.value;
		uls.insertBefore(lic,lis[0]);
	}
</script>
</html>
16.removeChild（删除父节点中的子元素）
     父级.removeChild(子节点) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom9</title>
	<style>
		span{
			color: red;
		}
	</style>
</head>
<body>
	<ul id="uls">
		<li>jdjdjdjd<span>删除</span></li>
		<li>jdsdcsd<span>删除</span></li>
		<li>jdcsdsddjd<span>删除</span></li>
		<li>12123<span>删除</span></li>
		<li>343434jdjd<span>删除</span></li>
	</ul>
</body>
<script>
	var uls = document.getElementById("uls");
	var spans = document.getElementsByTagName("span");
	for(var i = 0; i<= spans.length; i++){
		spans[i].onclick = function(){
			uls.removeChild(this.parentNode);
		}
	}
	// removeChild 删除父元素中的子节点。
</script>
</html>
17.表格中的一些便捷操作
 tBodies  --> getElementsByTagName("tbody")
 rows       --> getElementsByTagName("tr")
 cells      --> getElementsByTagName("td")
 tHead     --> 获取表头（tHead不是数组）
 tFoot     --> 获取页脚（tFoot不是数组） 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格操作</title>
</head>
<body>
	<table id="tab1" border="1px" width="400px">
		<thead>
			<tr>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>21</td>
			</tr>
			<tr>
				<td>2</td>
				<td>王五</td>
				<td>22</td>
			</tr>
			<tr>
				<td>3</td>
				<td>李四</td>
				<td>22</td>
			</tr>
		</tbody>
	</table>
</body>
<script>
	var tab1 = document.getElementById("tab1");
	// 用平常的获取标签的方法找到“王五”。
	// 表格便捷操作
	// tBodies --> getElementsByTagName("tbody")
	// rows    --> getElementsByTagName("tr")
	// cells   --> getElementsByTagName("td")
	// tHead   --> 获取表头（tHead不是数组）
	// tFoot   --> 获取页脚（tFoot不是数组）
	alert(tab1.tBodies[0].rows[1].cells[1].innerHTML)
</script>
</html>
somnus_ly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tab栏切换制作案例 DOM小结
weixin_44247157的博客
03-04 453
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
javascript DOM小结
weixin_30437337的博客
12-27 68
一：定义 dom：文档对象模型。 dom是针对HTML和XML文档的一个API。dom描绘了一个层次化的节点树，允许开发人员添加、移除、修改页面的某一部分。 1：childNodes（返回当前节点的子节点列表） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
DOM 小结
weixin_30550081的博客
09-18 58
转载于:https://www.cnblogs.com/vonk/p/3979720.html
DOM 简单小结
daniel_yang1125的博客
06-13 141
DOM Node 类型 文档 —> 节点，Node 类型 Node 接口，由 DOM 中所有节点类型实现； 因为共享相同属性和方法； 属性： nodeType nodeName nodeValue 节点关系： childNodes —> NodeList 对象 类数组 有序 动态查询（访问那一刻） parentNode previousSibling nextSibling ownerDocument —> 整个文档的文档节点 操作节点 appendChild i
JS-DOM小结
Anoddguy的博客
09-05 264
JavaScript DOM小结
weixin_33841503的博客
02-23 60
DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。 熟悉DOM对一个前端开发人员尤其重要，因此我根据红宝书也就是JavaScript高级程序设计制作成一个思维导图。可能会有一些漏点或者缺点，请您指出。 图片不够清晰，网盘链接: h...
【JS】DOM小结
韩丽萍
01-11 435
前言    JS是面向对象的，在基对象window上个人感觉最重要的就是DOM对象了。DOM,文档对象模型，就是要在网页上显示的内容的编辑，它的灵魂就是节点，父节点，子节点一环套一环，有点像之前学的树结构。DOM对DOM的认识    理解：     设置属性的用法：整个网页就是由节点组成的，宏观来说就是html节点，及其下head节点和body节点，head和body下又有各自的子节点。    节
DOM操作小结
YZC2251518051的博客
04-10 149
DOM的基本操作 节点的增加 增加元素节点：document.createElement(’ ‘) 增加文本节点：document.createTextNode (’ ‘) 增加注释节点： document.createComment(’ ') 元素节点下的插入 在父节点下插入目标节点 ：appendChild( ’ ') 在父节点下的“b”节点前插入“a”节点： insertBefore(a,b...
DOM编程小结
可可爱爱❀葱葱子的博客
07-15 127
简介 DOM（Document Object Model）文档对象模型，借助DOM模型，可以将一个结构化的文档转换成DOM内存树，程序可以直接修改内存。 浏览器工作过程 Step1：从网络或本地拿到html源代码 Step2：浏览器将html源代码中的每个标签都实例化对应的对象 Step3：在内存中形成一个DOM树 Step4：将内存DOM树解析为可视页面 Step5：JS直接修改DOM树，改变视图页面 DOM和HTML文档 DOM为HTML每个元素都提供了一个对应的类，每个类中都有相
JsDom 编程小结
12-09
几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。 动态创建元素的时候innerHTML可以代替createElement(),属于简单，粗放型...
DOM下的节点属性和操作小结
12-11
属性： 1 .nodeName 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName，是只读的。 2 .nodeType 值：1，元素节点；2，属性节点；3，文本节点。nodeType是只读的。 3 .nodeValue 返回一个...
jQuery DOM操作小结与实例
10-29
jQuery 是一个广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作。DOM是HTML和XML文档的结构表示，允许我们通过编程方式访问和修改文档内容。在jQuery中，DOM操作包括创建新元素、复制现有...
javascript dom 基本操作小结
10-29
JavaScript DOM 基本操作小结 在网上找到很多 DOM 操作的例子，感觉不全且凌乱。以下是 JavaScript DOM 基本操作小结，总结了 DOM 元素的创建、插入、替换和删除等基本操作。 DOM 元素的创建 在 JavaScript 中，...
JS中Table对象集合
somous_ly的专栏
08-01 1018
Table对象集合 Table对象:表示HTML文档中的表，对于文档中每个标记，浏览器都创建一个Table对象. 集合 描述 cells[] 获取包含表格中所有单元格的数组 rows[] 获取包含表格中所有行的数组 tBodies[] 获取包含表格中所有tbody的数组 Table对象属性
IE、FF、Safari 等浏览器下scrollTop的差异
somous_ly的专栏
08-01 896
1、各浏览器下 scrollTop的差异 IE6/7/8： 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ； 对于有doctype声明的页面则可以使用document.documentElement.scrollTop  ； Safari: safari 比较特别，有自己获取scrollTop的函数 ： win
节点关系及节点操作方法
somous_ly的专栏
08-03 856
childNodes：所有子节点 children：所有是标签类型的子节点 nextSibling：下一个兄弟节点 previousSibling：上一个兄弟节点 parentNode：父节点 firstChild : 第一个子节点 lastChild：最后一个子节点
文字多行超出省略
somous_ly的专栏
12-22 715
方法一： （注意：尽量不要设置高度，测试效果不好） .text_line { width:200px; border: 1px solid black; overflow: hidden; text-overflow: elipsis; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; }   
JS中this关键字的使用
somous_ly的专栏
08-01 588
js中this关键字代表类的变量和方法为公有方法，可供类的对象访问。看下面的代码： [html] view plaincopy html>   head>   script language="javascript">     function Person() {       this.name = "abc";       this.a
Java利用DOM解析与XML应用详解
小结部分总结了本章的主要内容，而习题部分则提供了实践练习的机会，帮助读者巩固所学知识。这份文档为想要深入学习Java与XML交互的开发者提供了一个清晰的路径，无论是初学者还是进阶者都能从中受益。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值