响应式网页设计之DOM对象

最新推荐文章于 2022-07-08 08:40:31 发布

PRINT！

最新推荐文章于 2022-07-08 08:40:31 发布

阅读量307

点赞数 2

分类专栏：响应式网页学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_48592827/article/details/117452881

版权

响应式网页学习笔记专栏收录该内容

20 篇文章 3 订阅

订阅专栏

DOM对象

一、认识DOM
- 1.什么是DOM
二、Node节点

补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。

一、认识DOM

1.什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
示例：DOM树

<html>
	<head>
		<title>这是标题</title>
	</head>
	<body>
		<div>
			<h1 style="color : red ">这是内容</h1><a href="1.html">这是链接</ a>
		</div>
	</body>
</html>

在这里插入图片描述

二、Node节点

1.初识Node节点

HTML中的所有内容都可以用节点（Node）来描述
节点共有12种类型，常见的节点类型有

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

通过操作DOM树，JS可以实现：
改变页面中任意的HTML元素
改变页面中任意的HTML属性
改变页面中任意的CSS样式
删除页面中任意的HTML元素和属性
添加任意的HTML元素和属性到页面中
对页面中任意的事件做出响应
对页面中的任意元素添加事件

添加节点

document.createElement(“标签名”)

子节点添加到末尾

父节点.appendChild(子节点)

向指定节点前插入新节点

父节点.insertBefore(要插入的节点，指定节点）

删除节点

父节点.removeChild(要删除的子节点)
父节点.replaceChild(参数1，参数2) 用参数1替换参数2

2.访问Node节点

① 使用getElement系列方法可以访问指定元素
在这里插入图片描述
② 通过层级关系访问节点

注意：使用以上方法时要注意换行符、空白符等也是一个节点
③ 通过层级关系访问元素

3.访问节点的属性

每个Node节点包括如下属性
节点类型 NodeType
节点名 NodeName
节点值 NodeValue
示例：
在这里插入图片描述

document.getElementsByTagName('p')[0].childNodes[0] .nodeValue

① 访问节点文本内容的方法
innerHTML （会返回所有的内部内容，包括子元素的标签）
innerText
textContent

② 访问元素属性
通过element.属性名访问或通过**element[属性名]**访问（可使用变量）
示例：
在这里插入图片描述

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 ' )

PRINT！

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
响应式网页设计之DOM对象

DOM对象一、认识DOM1.什么是DOM二、Node节点1.初识Node节点2.访问Node节点3.访问节点的属性补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。一、认识DOM1.什么是DOM当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。示例：DOM树<html> <head> <title>这是标题</titl
复制链接

扫一扫