JS学习笔记-DOM

最新推荐文章于 2022-11-03 20:55:12 发布

壳子i

最新推荐文章于 2022-11-03 20:55:12 发布

阅读量139

点赞数

分类专栏： js 文章标签： dom javascript js

本文链接：https://blog.csdn.net/weixin_45412353/article/details/106339917

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

什么是DOM?

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
–MDN

可以简单的理解为DOM就是HTML元素对象，我们要做的就是对它们进行一些操作，达到我们想要的效果，那我们该如何操作DOM?

一、获取DOM元素

获取DOM元素的方法

@param: String 传入一个元素的id名例:‘name’
@return: 返回的是查找到的元素对象 || null
document.getElementById(‘name’)

@param: String 传入一个元素的类名(class) 例:‘name’
@return: 返回的是一个元素集合放着所有包含此类名的元素 || 空集合
document.getElementsByClassName(‘name’)

@param:String 传入一个name 例:‘root’
@retrun:返回一个节点集合存放着所有此name的元素 || 空集合
document.getElementsByName(‘root’)

@param:String 传入一个标签名例:‘li’
@return:返回一个元素集合存放着所有此标签元素对象 || 空集合
document.getElementsByTagName(‘li’)

@param:String 传入一个选择器例:’.root’ ‘#name’
@return:返回通过选择器查找到的第一个元素 || null
document.querySelector(’.root’)

@param:String 传入一个选择器例:’.root’ ‘#name’
@return:返回通过选择器查找到的所有元素的集合 || 空集合
document.querySelectorAll(’.root’)

二、操作DOM

(1)、更新DOM

element.innerHTML: 获取DOM的元素中的HTML内容
例:
<div id="root">
		我的名字是啊哈哈哈
		<span>xxxxx</span>
</div>
root.innerHTML的值为 我的名字是啊哈哈哈<span>xxxxx</span>
如果我们要修改直接通过 element.innerHTML=“xxxx” 即可

(2)、创建dom元素

document.createElement(tagName):创建一个标签对象(仅仅创建的是一个js对象，并没有在dom树上，我们需要调用插入DOM的方法将元素插入到DOM树中)
tagName: 创建的标签的标签名
例：
	let div = document.createElement('div')

(3)、插入DOM

element.insertBefore(newNode, referenceNode):将newNode插入到element中的referenceNode前面
例:
<body>
		xxxx
		<div id="box"></div>
</body>
我们想插入一个新的div到
let div = document.createElement("div")// 创建一个DIV对象
document.body.insertBefore(div, box)
插入过后的DOM结构为
<body>
		xxx
		<div></div>
		<div id="box"></div>
</body>

element.appendChild(newElement)：将newEelement添加到element的最后一个子元素
此方法大家自己试一下

还有一些比较新的API，例如：
Element.insertAdjacentElement()
Element.insertAdjacentText()
Element.insertAdjacentHTML()
大家可以自行查看文档

(4)删除元素

element.remove()：将element从DOM树上移除
此方法比较简单，大家自行练习

node.removeChild(childNode)：移除某个元素/节点的子节点中childNode
大家自行练习

三、事件操作

常用事件

四、常用属性

Element是Node的子类所有，node对象有的element对象也有，如果你是初学者暂时没必要在意node、element

element.className：获取一个元素的class属性
element.classList :获取一个元素的类名集合详情查看
element.tagName：获取元素的标签名
element.attributes：获取元素的所有属性，返回一个包含所有属性的伪数组
element.id：获取元素的id属性
element.children：所有子元素的集合
element.firstElementChild：获取第一个子元素
element.lastElementChild：获取最后一个子元素
element.nextElementSibling：获取当前元素的下一个元素
element.previousElementSibling：获取当前元素的上一个元素
node.nodeType：元素的类型节点类型描述详细文档
node.firstChild：获取第一个子节点( 不一定是元素)
node.lastChild：获取最后一个子节点
node.parentNode：获取父节点
node.nodeName：获取节点名字，如果是元素节点就是标签名
node.nextSibling：获取当前节点紧跟着的下一个节点
node.previousSibling：获取当前节点紧跟着的上一个节点
node.childNodes：获取所有子节点集合

壳子i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习笔记-DOM

什么是DOM?文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。 --* 引自MDN*可以简单的理解为DOM就是HTML元素对象，我们要做的就是对它们进行一些操作，达到我们想要的效果，那我们该如何操作DOM?一、获取DOM元
复制链接

扫一扫