JavaScript中的DOM（一）

1.DOM的理解

DOM称为文档对象模型（Document Object Model）

将页面所有内容表示为可以修改的对象

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

在html结构中，最终会形成一个树结构；

在抽象成DOM对象的时候，它们也会形成一个树结构，我们称之为DOM Tree；

2. document对象

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

3.节点Node之间的导航navigator

如果我们获取到一个节点后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航

节点存在以下的关系

父节点：parentNode前兄弟节点：previousSibling后兄弟节点：nextSibling子节点：childNodes第一个子节点：firstChild最后一个子节点：lastChild

 

    
      
      我是标题
      我是div元素
      我是一个段落
      我是文本
    
    

4.元素Element之间的导航navigator

如果我们获取到一个元素（Element）后，可以根据这个元素去获取其他的元素，我们称之为元素之间的导航。

 节点之间存在如下的关系：

父元素：parentElement前兄弟节点：previousElementSibling后兄弟节点：nextElementSibling子节点：children第一个子节点：firstElementChild第二个子节点：lastElementChild

      
      我是标题
      我是div元素
      我是一个段落
      我是文本
    
    

5.表格table元素的导航navigator

元素支持（除了上面给出的之外）还支持以下这些属性

table.rows——元素的集合table.caption/tHead/tFoot——引用元素,table.tBodies——元素的集合

,,元素提供了 rows 属性

tbody.rows — 表格内部元素的集合；

tr.cells — 在给定中的和单元格的集合；tr.sectionRowIndex — 给定的中的位置（索引）；tr.rowIndex — 在整个表格中的编号（包括表格的所有行）；

,

和

td.cellIndex — 在封闭的中单元格的编号 6.表单form元素的导航navigator   元素可以直接通过document来获取：document.forms var formEl = document.forms[0] 元素中的内容可以通过elements来获取：form.elements var elements = formEl.elements  7.获取元素的方法* 当元素彼此靠近或者相邻时，DOM 导航属性（navigation property）非常有用。 但是如果想要拿到任意的元素该用什么api呢？  目前最常用的是querySelector和querySelectorAll getElementById会用在适配较低浏览器上面 8.节点的属性 8.1.nodeType属性 8.2.nodeName、tagName属性 8.3.innerHTML、textContent、outerHTML 8.4.nodeValue 8.5.node的其他属性   欢迎分享，转载请注明来源：内存溢出 原文地址: http://outofmemory.cn/web/1321421.html javascript 开发语言 ecmascript 赞 (0) 打赏 微信扫一扫 支付宝扫一扫 中间的点怎么打 一级用户组 0 0 生成海报 React组件生命周期 上一篇 2022-06-12 HTML简单介绍 下一篇 2022-06-12 发表评论 请登录后评论... 登录后才能评论 提交 评论列表（0条） 保存