JS操作DOM

最新推荐文章于 2023-08-09 18:31:11 发布

云上@流

最新推荐文章于 2023-08-09 18:31:11 发布

阅读量137

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_53571388/article/details/112844863

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

vue 和 React 框架应用广泛，封装了 DOM 操作
但 DOM 操作一直都会是前端工程师的基础、必备知识
只会 vue 而不懂 DOM 操作的前端程序员，不会长久

DOM

JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。有这几个概念：文档、元素、节点
整个文档是一个文档节点；每个标签是一个元素节点；包含在元素中的文本是文本节点；元素上的属性是属性节点；文档中的注释是注释节点

DOM 本质上是 DOM 树：

DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；
有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。

下面为html文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    <a href="">我的链接</a>
	<h1>我的标题</h1>
</body>
</html>

DOM树形如一颗倒长的树。

它很容易表明家族成员之间的关系，把复杂的关系简明地表示出来

在这里插入图片描述

DOM 节点操作

新增节点
查询子节点
查询父节点
删除节点

1. 创建新节点  （document调用）
  	createDocumentFragment()   // 创建一个DOM片段（创建文档片段对象，所有主要浏览器都支持 createElement() 方法）
	createElement()   // 创建一个具体的元素（通过指定名称创建一个元素，所有主要浏览器都支持 createElement() 方法）
	createTextNode()   // 创建一个文本节点

2. 添加、移除、替换、插入  （父元素调用）
	appendChild()  // 添加（创建新的 HTML 元素 (节点)）
	removeChild()  // 移除（移除已存在的元素）
	replaceChild()  // 替换（替换 HTML 元素）
	insertBefore()  // 插入（将新元素添加到开始位置）

3. 查找 （document调用）
	getElementsByTagName()  // 通过标签名称 一组元素（标签名，通过标签名查找 HTML 元素）
	getElementsByName()  // 通过元素的Name属性的值 一组元素（name）
	getElementById()  // 通过元素Id，唯一性单个元素（id名，通过 id 查找 HTML 元素）
	getElementByClassName()  // 通过class元素获取  一组元素（类名，通过class类名查找）
	querySelectorAll('选择器')  // 通过选择器获取一组元素（选择器）
	querySelector("选择器")  // 通过选择器获取单个元素（选择器）
  	获取：
   	获取html标签：document.documentElement
	获取body标签：document.body

4. 关系  （元素调用前三个父元素调用 ）
   	childNodes  // 获取所有的子节点
	children  // 获取所有的子元素节点 (常用)
	firstElementChild   获取第一个元素
	lastElementChild  获取最后一个元素
	parentNode	获取当前节点的父节点
	previousElementSibling	获取当前节点的前一个兄弟元素
	nextElementSibling  获取当前节点的后一个兄弟元素

DOM 节点的Attribute和Property有和区别？

property 和 Attribute

property：修改对象属性，不会体现到 html 结构中
attribute：修改 html 属性，会改变 html 结构
两者都有可能引起 DOM 重新渲染

云上@流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS操作DOM

前言vue 和 React 框架应用广泛，封装了 DOM 操作但 DOM 操作一直都会前端工程师的基础、必备知识只会 vue 而不懂 DOM 操作的前端程序员，不会长久DOMJavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。有这几个概念：文档、元素、节点整个文档是一个文档节点每个标签是一个元素节点包含在元素中的文本是文本节点元素上的属性是属性节点文档中的注释是注释节点DOM 本质上是 DOM 树：DOM树是结构，树是由
复制链接

扫一扫