JavaScript之DOM对象模型

最新推荐文章于 2022-01-26 16:17:12 发布

xu1022

最新推荐文章于 2022-01-26 16:17:12 发布

阅读量112

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript java js dom操作

本文链接：https://blog.csdn.net/xu1022/article/details/115975979

版权

JavaScript学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、DOM对象模型

当网页被加载时，浏览器会创建页面的文档对象模型
1.Node节点
HTML中的所有内容都可以用节点(Node)来描述节点共有12种类型，常见的节点类型有

元素节点elementNode
属性节点attributeNode
文本节点textNode

通过操作DOM树，JS可以实现:

改变页面中任意的HTML元素
改变页面中任意的HTML属性
改变页面中任意的CSS样式
删除页面中任意的HTML元素和属性
添加任意的HTML元素和属性到页面中
对页面中任意的事件做出响应
对页面中的任意元素添加事件

.appendChild(节点)
插入节点作为最后一个子节点

.hasChildNodes()
返回一个布尔值，表示当前节点是否有子节点,空文本等也算子节点

.cloneNode(布尔值)
返回被克隆的节点，false只复制当前节点，true复制当前节点和其内的所有节点

.insertBefore()
父节点
.insertBefore(待插入节点,父节点的子节点);
第一个参数为插入节点，第二个参数为插入到哪个子节点之前，为null则表示插入到最后
.removeChild(删除的节点对象)
删除父节点中的指定子节点，返回值为删除的节点对象

.replaceChild(替换子节点,被替换子节点)
第二个参数将被第一个参数替换，并且第一个参数替换后，原位置空间消失
返回值是被替换的节点
.contains(子节点对象)
判断指定节点是否为当前节点的子节点，返回值为布尔值
.isEqualNode(指定节点)
判断指定节点是否和当前节点相等

<html>
	<head>
		<meta charset="utf-8">
		<title>js node常用方法</title>
		<style type="text/css">
			.box{
				height:400px;
				width:400px;
				border:solid 1px red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p id="p1">123</p>
			<p id="p2"><a href="">ww</a></p>
			<p>323</p>
			<p>423</p>
			<p>523</p>
		</div>
		
		<script>
			var h1=document.createElement("h1");
			h1.innerHTML="h111111";
			document.body.appendChild(h1);
			var box=document.querySelector(".box");
			var p2=document.querySelector("#p2");
			var p1=document.querySelector("#p1")
			console.log(document.querySelector(".box").firstChild.nextSibling.hasChildNodes())
			
			var cbox=document.querySelector(".box").cloneNode(true);
			console.log(cbox.firstChild.nextSibling.nextSibling.nextSibling.hasChildNodes());
			
			var h1=document.createElement("h1");
			h1.innerHTML="待插入"
			
			box.insertBefore(h1,p2);
			
			box.replaceChild(p1,p2);
			
			console.log(box.contains(p1));
			
		</script>
	</body>
</html>

2、访问Node节点
HTML
每个Node节点包括如下属性

节点类型 NodeType
节点名 NodeName
节点值 NodeValue

访问节点文本内容的方法
在这里插入图片描述
3、访问元素属性
通过element.属性名访问或通过element[属性名]访问(可使用变量)

<a id="app" class="text black large" href=" 1.html">
document.getElementsByTagName('a')[0].id  // app
document.getElementsByTagName('a')[0].href //完整路径
document.getElementsByTagName('a')[0].className  // 'text black large
document.getElementsByTagName('a')[0].classList  // [ ' text ' ,'black ', ' large ' )

二、DOM元素特性

element.attributes返回元素的所有特性
element.setAttribute(name,value)设置元素的指定特性
element.getAttribute(name)获取元素的指定特性
element.removeAttribute(name)删除元素的指定特性

特性和属性的区别

理论上，特性(attribute)与属性(property)是两个不同的概念，特性(attribute)是DOM元素	的子节点，属性(property)是DOM元素的特性映射到JS后
对应对象的属性(property)。	实际使用中，可以忽略两者的区别

1、table对象
table为DOM元素中的一个特别对象，拥有一系列独有的属性和方法

属性/方法	说明
rows	返回table对象中所有行的集合，集合中每一个元素为tableRow对象
inserRow(index)	在表格中插入一行并返回该行参数为索引值，如不输入，则在未尾添加
deleteRow(index)	在表格中删除一行参数为索引值，必选

tableRow对象的属性和方法

属性/方法	说明
cells	返回tableRow对象中所有行的集合，集合中每一个元素为tableCell对象
rowIndex	返回该行在表格中的索引位置
insertCell(index)	在行中插入一列并返回该列参数为索引值，如不输入，则在末尾添加
deleteCell(index)	在行中删除一列参数为索引值，必选

tableCell对象的属性

属性	说明
cellIndex	返回该单元格在行中的索引位置

2、创建DOM对象

document.createElement(TagName)创建一个元素节点
document.createTextNode(文本内容)创建一个文本节点
element.appendChild(子节点)向父元素末尾添加子节点

var ul = document.createElement('ul')
var li = document.createElement('li')
var text = document.createTextNode('苹果')ul.appendChild( li )
li.appendChild(text )
document.body .appendChild(ul)

3、修改DOM对象

element.removeChild(子节点)删除一个子节点
element.replaceChild(新节点,旧节点)替换一个子节点
element.insertBefore(新节点,已有节点)在已有的子节点前插入一个新的子节点

4、HTML绑定

<input type="button" id="btn" value="click_me" onclick="show()">

5、js绑定
js绑定事件时，不能加（），否则会在页面加载时立即执行可以绑定匿名函数

6、addEventListener()

document.getElementById( 'btn ' ).addEventListener( 'click ', show)
document. getElementById( 'btn ' ).addEventListener( 'click '， function ( ) {console.log( 1)
})

7、removeEventListener()

document.getElementById( ' btn ').removeEventListener( 'click ', show)

xu1022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之DOM对象模型

.appendChild(节点) 插入节点作为最后一个子节点.hasChildNodes() 返回一个布尔值，表示当前节点是否有子节点,空文本等也算子节点.cloneNode(布尔值) 返回被克隆的节点，false只复制当前节点，true复制当前节点和其内的所有节点.insertBefore() 父节点.insertBefore(待插入节点,父节点的子节点); 第一个参数为插入节点，第二个参数为插入到哪个子节点之前，为null则表示插入到最后 .removeChild(删除的
复制链接

扫一扫