再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查
原创
再谈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
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
