修改网站内容( DOM节点关系与节点查找，节点选择器的页面元素查找)

　　修改网站内容(

DOM节点关系与节点查找，节点选择器的页面元素查找)

　　浅谈BOM与DOM（3)：DOM节点操作-元素样式修改与DOM内容增删改查

　　作者：zhoulujun 发布日期：2020-03-17

　　Web前端开发，JS修改页面，首选页面元素搜索，节点遍历。DOM通过创建树来表示文档，描述处理网页内容的方法和接口，让开发者对文档的内容和结构拥有前所未有的控制权。可以使用 DOM API 轻松删除、添加和替换节点。

　　操作一个节点，首先要选择节点，然后你要知道节点选择器和DOM节点搜索

　　DOM 节点选择器

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

　　选择器

　　范围

　　案例分析

　　getElementById()

　　一个参数：元素标签的ID，返回一个id属性对应的节点对象

　　仅选择元素

　　getElementsByTagName()

　　一个参数：元素标签名，返回对象数组（准确的说是HTML采集集合）

　　选择所有img图片

　　getElementsByName()

　　一个参数：name属性名，匹配元素名=参数值的元素，作为一个NodeList对象。

　　已选择 iframe

　　getElementsByClassName()

　　一个参数：一个收录一个或多个类名的字符串，返回文档中指定类名的所有元素的集合（NodeList）

　　对于某一类

　　查询选择器()

　　接收 CSS 选择器，返回匹配的第一个元素，如果没有则返回 null

　　选择一种风格

　　querySelectorAll()

　　接收CSS选择器，返回一个数组，如果没有，返回[]

　　选择时钟样式

　　节点选择器的性能对比：

　　预防措施：

　　DOM节点关系和节点搜索

　　遍历节点树，涉及的方法

　　hasChildNodes()

　　如果收录一个或多个节点，则返回 true

　　收录（）

　　如果是后代节点则返回真

　　isEqualNode()

　　两个节点引用同一个对象：传入节点和引用节点的引用对于同一个对象返回true

　　isSameNode()

　　指两个节点是否属于同一类型，是否具有相等的属性/childNodes等。

　　比较文档位置（）

　　确定节点之间的各种关系

　　父节点

　　父节点，所有节点只有一个父节点

　　父元素

　　父节点标签元素，只有ie-parentNode支持，可以替换parentElement的所有功能

　　子节点

　　所有子节点

　　孩子们

　　第一层子节点-仅返回元素节点

　　第一个孩子

　　第一个子节点，以 Node 对象的形式

　　第一个子元素

　　第一个子标签元素

　　最后一个孩子

　　最后一个子节点

　　最后一个子元素

　　最后一个子标签元素

　　以前的兄弟姐妹

　　上一个兄弟节点

　　以前的元素兄弟姐妹

　　上一个同级标签元素

　　下一个兄弟姐妹

　　下一个兄弟节点

　　下一个元素兄弟姐妹

　　下一个兄弟标签元素

　　子元素计数

　　第一层子元素的数量（不包括文本节点和注释）

　　所有者文档

　　指向整个文档的文档节点——当前节点的根元素（文档对象）

　　节点和元素的区别

　　节点关系图如下

　　

　　parentNode 和 parentElement DOM 节点样式操作的区别

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

　　操作类名

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

　　classList：返回所有类名的数组

　　操作方式方法

　　style.cssText

　　可以以风格阅读和编写代码

　　样式.item()

　　返回给定位置的 CSS 属性的名称

　　样式.长度

　　样式代码块中的参数数量

　　style.getPropertyValue()

　　返回给定属性的字符串值

　　style.getPropertyPriority()

　　检查给定的属性是否设置了！important，设置为返回“important”；否则，返回一个空字符串

　　style.removeProperty()

　　删除指定的属性

　　style.setProperty()

　　设置属性，有3个参数：设置属性名，设置属性值，是否设置为“重要”（可以不写也可以写“”）

　　对于css的一般操作，推荐使用cssText。

　　DOM 内容操作文本节点 TEXT

　　内部文本

　　所有纯文本内容，包括子标签中的文本

　　外部文本

　　类似于内文

　　内部HTML

　　所有子节点（包括元素、评论和文本节点）

　　外部HTML

　　返回自己的节点和所有子节点

　　文本内容

　　与innerText类似，返回的内容是样式化的

　　数据

　　文字内容

　　长度

　　文字长度

　　创建文本节点（）

　　创建文本

　　归一化（）

　　删除文本之间的空白

　　拆分文本（）

　　分割

　　追加数据（）

　　附加

　　删除数据（偏移量，计数）

　　从 offset 指定的位置删除 count 个字符

　　插入数据（偏移量，文本）

　　在 offset 指定的位置插入文本

　　替换数据（偏移量，计数，文本）

　　替换，从offset到offset count的文本被替换为text

　　子字符串数据（偏移量，计数）

　　将文本从 ffset 提取到 offscount

　　内部文本、内部HTML、外部HTML、外部文本

　　

　　innerHTML 的细节

　　文档节点文档

　　文档.documentElement

　　代表页面中的元素

　　文件体

　　代表页面中的元素

　　文档.doctype

　　代表标签

　　文件头

　　代表页面中的元素

　　文件名

　　表示元素的文本，可以修改

　　文档.URL

　　当前页面的 URL 地址

　　文档域

　　当前页面的域名

　　文档.charset

　　当前页面使用的字符集

　　文档默认视图

　　返回与当前文档对象关联的窗口对象，不返回 null

　　文档.锚点

　　文档中所有具有 name 属性的元素

　　文档.links

　　文档中所有具有 href 属性的元素

　　文档.forms

　　文档中的所有元素

　　文档.图像

　　全部在文档中

　　元素

　　文档.readyState

　　两个值：loading（文档正在加载）、complete（文档已加载）

　　模式

　　两个值： BackCompat：标准兼容模式关闭，CSS1Compat：标准兼容模式开启

　　写（），写ln（），

　　开关（）

　　write() 文本原样输出到屏幕上，并在 writeln() 输出后添加一个换行符，

　　open() 清除内容并打开一个新文档，close() 关闭当前文档，下次再写一个新文档

　　DOM基本操作思维导图

　　

　　参考文章：

　　ECMAScript、BOM、DOM（核心、浏览器对象模型和文档对象模型）

　　JavaScript学习总结（三）BOM和DOM详解

　　Javascript操作BOM和DOM详解(1）

　　JavaWeb学习总结：JavaScript（BOM和DOM）

　　HTML DOM 事件对象

　　XML DOM-Element 对象

　　JAVAScript中DOM和BOM的区别分析

　　转载本站文章《浅谈BOM与DOM（3)：DOM节点操作-元素样式修改及DOM内容增删改查》，

　　请注明出处：

　　上一篇：说说BOM和DOM（7)：HTML DOM Event对象属性和DOM事件详细列表

　　下一篇：说说BOM和DOM（1)：BOM和DOM概述