再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查

操作节点，先得选择节点，就得知道节点选择器与DOM节点查找

DOM节点选择器

W3C提供了比较方便的定位节点的方法和属性

getElementById()	一个参数:元素标签的ID
getElementsByTagName()	一个参数:元素标签名
getElementsByName()	一个参数:name属性名
getElementsByClassName()	一个参数:包含一个或多个类名的字符串
querySelector()	接收CSS选择符，返回匹配到的第一个元素，没有则null
querySelectorAll()	接收CSS选择符，返回一个数组，没有则返回[]

DOM节点关系与节点查找

遍历节点树，所涉及发方法

hasChildNodes()	包含一个或多个节点时返回true
contains()	如果是后代节点返回true
isEqualNode()	两个节点引用的是同一个对象:传入节点与引用节点的引用为同一个对象返回true
isSameNode()	指的是两个节点是否是同一类型，具有相等attributes/childNodes等
compareDocumentPostion()	确定节点之间的各种关系
parentNode	父节点
parentElement	父节点标签元素
childNodes	所有子节点
children	第一层子节点
firstChild	第一个子节点，Node 对象形式
firstElementChild	第一个子标签元素
lastChild	最后一个子节点
lastElementChild	最后一个子标签元素
previousSibling	上一个兄弟节点
previousElementSibling	上一个兄弟标签元素
nextSibling	下一个兄弟节点
nextElementSibling	下一个兄弟标签元素
childElementCount	第一层子元素的个数(不包括文本节点和注释)
ownerDocument	指向整个文档的文档节点

node与element的区别

element是包含在node里的，它的nodeType是1
parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。
当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null

节点关系图如下

DOM节点样式操作

DOM节点样式操作，可以设置class，设置样式

操作className

className:返回节点样式，可以设置 className="demo1 class2"

classList :返回所有类名的数组

add （添加）
contains （是否存在某个class，存在返回true,否则返回false）
remove（删除）
toggle（存在则删除，否则添加）

操作style方法

style.cssText	可对style中的代码进行读写
style.item()	返回给定位置的CSS属性的名称
style.length	style代码块中参数个数
style.getPropertyValue()	返回给定属性的字符串值
style.getPropertyPriority()	检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串
style.removeProperty()	删除指定属性
style.setProperty()	设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"")

DOM内容操作

文本节点TEXT

innerText	所有的纯文本内容，包括子标签中的文本
outerText	与innerText类似
innerHTML	所有子节点(包括元素、注释和文本节点)
outerHTML	返回自身节点与所有子节点
textContent	与innerText类似，返回的内容带样式
data	文本内容
length	文本长度
createTextNode()	创建文本
normalize()	删除文本与文本之间的空白
splitText()	分割
appendData()	追加
deleteData(offset,count)	从offset指定的位置开始删除count个字符
insertData(offset,text)	在offset指定的位置插入text
replaceData(offset,count,text)	替换，从offset开始到offscount处的文本被text替换
substringData(offset,count)	提取从ffset开始到offscount处的文本

innerText、innerHTML、outerHTML、outerText

innerText: 表示起始标签和结束标签之间的文本
innerHTML: 表示元素的所有元素和文本的HTML代码
outerText: 与前者的区别是替换的是整个目标节点，问题返回和innerText一样的内容
outerHTML: 与前者的区别是替换的是整个目标节点，返回元素完整的HTML代码，包括元素本身

文档节点 Document

document.documentElement	代表页面中的<html>元素
document.body	代表页面中的<body>元素
document.doctype	代表<!DOCTYPE>标签
document.head	代表页面中的<head>元素
document.title	代表<title>元素的文本，可修改
document.URL	当前页面的URL地址
document.domain	当前页面的域名
document.charset	当前页面使用的字符集
document.defaultView	返回当前 `document`对象所关联的 `window` 对象，没有返回 `null`
document.anchors	文档中所有带name属性的<a>元素
document.links	文档中所有带href属性的<a>元素
document.forms	文档中所有的<form>元素
document.images	文档中所有的<img>元素
document.readyState	两个值:loading(正在加载文档)、complete(已经加载完文档)
document.compatMode	两个值：BackCompat：标准兼容模式关闭、CSS1Compat：标准兼容模式开启
write()、writeln()、 open()、close()	write()文本原样输出到屏幕、writeln()输出后加换行符、 open()清空内容并打开新文档、close()关闭当前文档，下次写是新文档

DOM基本操作思维导图

参考文章：

ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）https://www.cnblogs.com/best/p/8028168.html

JavaScript学习总结（三）BOM和DOM详解 https://segmentfault.com/a/1190000000654274

Javascript操作BOM和DOM详解（1） https://blog.csdn.net/openbox2008/article/details/85260063

JavaWeb学习总结：JavaScript（BOM和DOM） https://blog.csdn.net/weixin_42384085/article/details/99807198

HTML DOM Event 对象 https://www.w3school.com.cn/jsref/dom_obj_event.asp

XML DOM - Element 对象 https://www.w3school.com.cn/xmldom/dom_element.asp

JAVAScript中DOM与BOM的差异分析 https://www.cnblogs.com/fjner/p/5892325.html

转载本站文章《再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8345.html

再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查的更多相关文章

DOM节点的增删改查
在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...
HTML DOM(二)：节点的增删改查
上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...
HTML DOM节点的增删改查
上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...
DOM操作 JS事件节点增删改查
--------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...
9 HTML DOM事件监听&版本兼容&元素（节点）增删改查
事件监听: 语法:element.addEventListener(event, function, useCapture); event:事件的类型,触发什么事件,注意不需要on作为前缀,比如cli ...
JavaScript之DOM的增删改查
JavaScript的组成: 1. ECMAScript-语法规范 2. Web APIs(浏览器提供的工具) (1).BOM (浏览器对象模型) (2).DOM (文档对象模型) 今天就来讲讲DOM ...
使用DOM进行xml文档的crud（增删改查）操作<操作详解>
很多朋友对DOM有感冒,这里我花了一些时间写了一个小小的教程,这个能看懂,会操作了,我相信基于DOM的其它API(如JDOM,DOM4J等)一般不会有什么问题. 后附java代码,也可以下载(可点击这 ...
超详细的DOM操作（增删改查）
操作DOM的核心就是增删改查原文地址:https://jianshu.com/p/b0aa846f4dcc 目录一.节点创建型API 1.1 createElement 1.2 createTex ...
DOM的操作（增删改查）
操作DOM的核心就是增删改查目录一.节点创建型API 1.1 createElement 1.2 createTextNode 1.3 cloneNode 1.4 createDocumentFr ...
第 9 章 DOM 的增删改查
DOM 的增删改查本文不会详细讲解,只是简单提及知识要点,详细可以参考<dom高级编程>. 1. document.write document.write('<h1>创建节 ...

随机推荐

shell脚本之语句（条件、循环）
条件语句 1.测试使用[]时要使用空格,注意格式格式1:test 条件表达式格式2:[ 条件表达式 ]#注意空格注意[]空格,否则会失败测试是否成功使用 $?返回值来判断 [ 操 ...
[Python急救站课程]整数数列求和
整数数列求和程序: n = input("请输入整数N: ") sum = 0 for i in range(int(n)): # range用于计数整数.for表示循环 sum ...
win11中无法识别STM32 BOOTLOADER的解决方法
如图,按照PYBoard的官方手册说可以直接右键选择自动更新驱动即可.但是我在WIN11上并没有成功. 主要是原因是,DFU模式下的STM设备驱动程序没有自动安装成功. 解决方法是手动安装一下驱动: ...
GCD Inside: GCD 宏
1 __OBJC__ __OBJC__宏的定义在 GCD 源码中找不到,它定义在 LLVM 的源码中: // initPreprocessor.cpp static void InitializeSt ...
Soc的Bring Up流程
1.Bring Up流程 SOC (System on a Chip) bring-up是一个复杂的过程,涉及到硬件.固件和软件的集成和验证,以下是一个基于BROM,SPL,UBOOT和Linux的启 ...
auto关键词
前言这个东西在新版本的 C 语言中还是很常用的,尤其是用到 for 循环中.蒟蒻之前也是对这个了解不多,基本没用过(除非迫不得已,因为我的C++编译器太逊了,不支持此操作,用这个操作还得用在线 ID ...
js 通过id、pid遍历集合获得树结构
原数据 let adreeJson = [ {id: 1, name: '陕西省', pid: 0}, {id: 2, name: '山西省', pid: 0}, {id: 3, name: '广东省 ...
PageHelper插件注意事项
PageHelper插件注意事项使用PageHelper.startPage后要紧跟查询语句下面的代码就有可能出问题: PageHelper.startPage(10, 10); if(param ...
路径规划算法 - 求解最短路径 - Dijkstra(迪杰斯特拉)算法
Dijkstra(迪杰斯特拉)算法的思想是广度优先搜索(BFS) 贪心策略. 是从一个顶点到其余各顶点的最短路径算法,节点边是不各自不同的权重,但都必须是正数如果是负数,则需要 Bellman-Fo ...
【UniApp】-uni-app-pinia存储数据
前言经过上个章节的介绍,大家可以了解到 uni-app-数据缓存的基本使用方法那本章节来给大家介绍一下 uni-app-pinia存储数据的基本使用方法经过我这么多篇章的介绍,我发现大家环境 ...