JavaScript的DOM操作

元素的继承

class Student extends Person{} 创建一个Student对象继承自Person对象本身会自带Person的属性并且可以创建属于自己的属性

什么是DOM？

◼ 前面我们花了很多时间学习JavaScript的基本语法，但是这些基本语法，但是这些语法好像和做网页没有什么关系，和前面学习
的HTML、CSS也没有什么关系呢？
这是因为我们前面学习的部分属于ECMAScript，也就是JavaScript本身的语法部分；
除了语法部分之外，我们还需要学习浏览器提供给我们开发者的DOM、BOM相关的API才能对页面、浏览器进行操作；
◼ 前面我们学习了一个window的全局对象，window上事实上就包含了这些内容：
我们已经学习了JavaScript语法部分的Object、Array、Date等；
另外还有DOM、BOM部分；
◼ DOM：文档对象模型（Document Object Model）
简称DOM，将页面所有的内容表示为可以修改的对象；
◼ BOM：浏览器对象模型（Browser Object Model）
简称BOM，由浏览器提供的用于处理文档（document）之外的所有内容的其他对象；
比如navigator、location、history等对象；

深入理解DOM

浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作：
于是浏览器将我们编写在HTML中的每一个元素（Element）都抽象成了一个个对象；
所有这些对象都可以通过JavaScript来对其进行访问，那么我们就可以通过JavaScript来操作页面；
所以，我们将这个抽象过程称之为文档对象模型（Document Object Model）；
◼ 整个文档被抽象到document 对象中：
比如document.documentElement对应的是html元素；
比如document.body对应的是body元素；
比如document.head对应的是head元素；
◼ 下面的一行代码可以让整个页面变成红色：
document.body.style.backgroundColor = "red"
◼ 所以我们学习DOM，就是在学习如何通过JavaScript对文档进行操作的；

认识DOM Tree

◼ 一个页面不只是有html、head、body元素，也包括很多的子元素：
在html结构中，最终会形成一个树结构；
在抽象成DOM对象的时候，它们也会形成一个树结构，我们称之为DOM Tree；

document对象

◼ Document节点表示的整个载入的网页，它的实例是全局的document对象：
对DOM的所有操作都是从document 对象开始的；
它是DOM的入口点，可以从document开始去访问任何节点元素；
◼ 对于最顶层的html、head、body元素，我们可以直接在document对象中获取到：
html元素： = document.documentElement
body元素： = document.body
head元素： = document.head
文档声明： = document.doctype

DOM的整体结构

◼ DOM相当于是JavaScript和HTML、CSS之间的桥梁
通过浏览器提供给我们的DOM API，我们可以对元素以及其中的内容做任何事情；
var htmlEl = document.documentElement;
var bodyEl = document.body
var headEl = document.head
var docTypeEl = document.doctype

console.log(htmlEl,bodyEl,headEl,docTypeEl)

节点、元素导航

节点（Node）之间的导航（navigator）

◼ 如果我们获取到一个节点（Node）后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航。
◼ 节点之间存在如下的关系：
 父节点：parentNode
 前兄弟节点：previousSibling
 后兄弟节点：nextSibling
 子节点：childNodes
 第一个子节点：firstChild
 最后一个子节点：lastChild

元素（Element）之间的导航（navigator）

◼ 如果我们获取到一个元素（Element）后，可以根据这个元素去获取其他的元素，我们称之为元素之间的导航。
◼ 节点之间存在如下的关系：
 父元素：parentElement
 前兄弟元素：previousElementSibling
 后兄弟元素：nextElementSibling
 子元素：children
 第一个子元素：firstElementChild
 最后一个子元素：lastElementChild

表格（table）元素的导航（navigator）

◼

元素支持 (除了上面给出的，之外) 以下这些属性：
table.rows — 元素的集合；
table.caption/tHead/tFoot — 引用元素 ，；
table.tBodies — 元素的集合；
◼ ，， 元素提供了 rows 属性：
tbody.rows — 表格内部 元素的集合；
◼ ：
tr.cells — 在给定 中的 在封闭的 // 中的位置（索引）；
tr.rowIndex — 在整个表格中 的编号（包括表格的所有行）；
◼ 中单元格的编号。

表单(form) 元素导航

1.form 元素可以直接通过document来获取:document.forms
var formEl = document.forms[0]
2.form 元素中的内容可以通过elements来获取
var elements = formEl.elements
我们可以通过设置表单元素的name来获取它们







获取元素的方法

◼ 当元素彼此靠近或者相邻时，DOM 导航属性（navigation property）非常有用。
但是，在实际开发中，我们希望可以任意的获取到某一个元素应该如何操作呢？
方法名 搜索方式 可以在元素上调用？ 实时的？
querySelector CSS-selector ✔ -
querySelectorAll CSS-selector ✔ -
getElementById id - -
getElementsByName name - ✔
getElementsByTagName tag or '*' ✔ ✔
getElementsByClassName class ✔ ✔

Node节点的属性

◼ 目前，我们已经可以获取到节点了，接下来我们来看一下节点中有哪些常见的属性：
 当然，不同的节点类型有可能有不同的属性；
 这里我们主要讨论节点共有的属性；
◼ nodeType属性：
 nodeType 属性提供了一种获取节点类型的方法；
 它有一个数值型值（numeric value）；
其他类型可以查看MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

◼ nodeName：获取node节点的名字；
◼ tagName：获取元素的标签名词；
◼ tagName和nodeName之间有什么不同呢？
tagName属性仅适用于Element 节点；
nodeName是为任意Node 定义的：
✓ 对于元素，它的意义与tagName相同，所以使用哪一个都是可以的；
✓ 对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串；

节点的属性-innerHTML、textContent

◼ innerHTML 属性
将元素中的HTML 获取为字符串形式；
设置元素中的内容；
◼ outerHTML 属性
包含了元素的完整HTML
innerHTML 加上元素本身一样；
◼ textContent 属性
仅仅获取元素中的文本内容；
◼ innerHTML和textContent的区别：
使用innerHTML，我们将其“作为 HTML”插入，带有所有HTML 标签。
使用textContent，我们将其“作为文本”插入，所有符号（symbol）均按字面意义处理。
◼ nodeValue/data
用于获取非元素节点的文本内容

节点的其他属性

◼ hidden属性：也是一个全局属性，可以用于设置元素隐藏。
◼ DOM 元素还有其他属性：
value
✓ ，

，
和 单元格的集合；
tr.sectionRowIndex — 给定的
和 ：
td.cellIndex — 在封闭的
posted @ 2024-10-21 09:53  韩德才  阅读(78)  评论(0)    收藏  举报