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

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

DOM 节点选择器

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

DOM 节点关系与节点查找

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

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 方法

DOM 内容操作

文本节点 TEXT

innerText、innerHTML、outerHTML、outerText

• innerText: 表示起始标签和结束标签之间的文本  

• innerHTML: 表示元素的所有元素和文本的 HTML 代码  

• outerText: 与前者的区别是替换的是整个目标节点，问题返回和 innerText 一样的内容  

• outerHTML: 与前者的区别是替换的是整个目标节点，返回元素完整的 HTML 代码，包括元素本身

文档节点 Document

DOM 基本操作思维导图

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