js基础--关于DOM

夺笋123

于 2022-05-29 20:37:39 发布

阅读量147

点赞数 1

分类专栏： # js基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_54510474/article/details/125030527

版权

js基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

DOM对象

DOM全称Document Object Model)，W3C推荐的处理可扩展置标语言的标准编程接口

DOM里面有很多方法，通过它提供的方法来操作一个页面的某个元素，可以理解为DOM操作就是HTML元素操作

DOM使用树形结构，用树节点的形式来表示页面中的每一个元素，如图
在这里插入图片描述

节点类型

DOM中共有12种类型，常见的三种如下
$\begin{cases} 元素节点\\ 属性节点\\ 文本节点 \end{cases}$

在javascript中我们可以通过nodeType属性来判断一个节点的类型，不同的节点属性值如下
以某一个HTML节点为例

<p id="demo1">这是一个段落</p>

	元素	nodeType属性值
元素节点	<p></p>	1
属性节点	id=“demo1”	2
文本节点	这是一个段落	3

DOM对象遍历

父元素

获取某一个元素的父元素

DOM对象.parentNode

子元素

获取所有子节点（包括元素节点、文本节点、属性节点等等）

属性	描述
childNodes	所有子节点
firstChild	第一个子节点
lastChild	最后一个子节点

获取所有元素节点（只包括元素节点）

属性	描述
children	所有子元素节点
firstElementChild	第一个子元素节点
lastElementChild	最后一个子元素节点

兄弟元素

获取所有子节点（包括元素节点、文本节点、属性节点等等）

属性	描述
previousSibling	查找前一个兄弟节点
nextSibling	查找后一个兄弟节点

获取所有元素节点（只包括元素节点）

属性	描述
previousElementSibling	查找前一个兄弟元素节点
nextElementSibling	查找后一个兄弟元素节点

获取元素的方法

get

方法	描述	返回值
getElementById()	通过id定位一个元素	DOM
getElementsByTagName()	通过标签名定位元素	类数组
getElementsByClassName()	通过类名定位元素	类数组
getElementsName()	通过name属性名定位元素	类数组

query

方法	描述
querySelector(“选择器”)	选取满足条件的第一个元素
querySelectorAll(“选择器”)	选取满足条件的所有元素

选择器类似于css选择器

创建元素的方法

方法	描述
createElement()	创建一个元素节点
creatTextNode()	创建一个文本节点

操作元素的方法

插入

在我们创建一个元素节点时，需要将它插入到HTML文档，这就需要插入元素

//将B元素插入到A元素的子元素末尾
A.appendChild(B)
//将B元素插入到A元素的子元素C之前
A.insertBefore(B,C)

删除

//删除A元素的子元素B
A.removeChild(B)

替换

//将父元素中的子元素B替换为元素C
A.replaceChild(B,C)

设置HTML元素的内部属性

属性	描述
innerHTML	获取或设置一个元素的内部元素
innerText	获取或设置一个元素的内部文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个html5 demo</title>

</head>
<body>
	<script>
		window.onload=function(){
			let new_html=document.createElement("p")
			new_html.className="the_new"
			new_html.style.backgroundColor="red"
			new_html.style.border="20px solid silver"
			new_html.innerText="这是一个段落"

			document.body.appendChild(new_html)
			//相当于
			// document.body.innerHTML='<p class="the_new" style="background-color:red; border:20px solid silver">这是一个段落</p>'
		}
	</script>
</body>
</html>

Chrome浏览器运行结果
在这里插入图片描述

获取HTML元素属性值

获取并设置HTML元素的属性值

DOM对象.属性值

//比如
//p.className  注意
//p.type
//p.id

对象方法

方法名	描述
getAttribute(“属性名”)	获取某个元素的属性值
setAttribute(“属性名”,“属性值”)	设置元素的某个属性的值
removeAttribute(“属性名”)	删除元素的某个属性
hasAttribute(“属性名”)	判断元素是否包含某个属性

css属性值操作

获取CSS属性值

getComputedStyle(DOM对象).属性名
//或
getComputedStyle(DOM对象)[属性名]
如
let a=getComputedStyle("p")["class"]

注意：css属性名的驼峰式写法
font-size>>fontSize
background-color>>backgroundColor
getComputedStyle方法获取css属性值的优势
我们知道，css有三种样式行内、内部、外部，对于某HTML元素，三种样式设置的CSS样式该方法都能够获得，但是下面的方法只能获得第一种即行内css样式

设置CSS属性值

style对象

DOM对象.style.属性名="属性值"
//或
DOM对象.style[属性名]="属性值"
如
p.style.width=30%;

cssText属性
可用于多个CSS属性

DOM对象.style.cssText="属性名:属性值;属性名:属性值,..."