js的组成

最新推荐文章于 2024-11-07 13:38:59 发布

觅花彩蝶

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量54

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/WH20000410/article/details/129678459

版权

javascript 组成

ECMAScript ：js语法，js基础我们学习的是ECMAScript标准规定的基本语法，无法实现页面交互效果
DOM 页面对象模型
BOM：浏览器对象模型

DOM和BOM是web APIs，web APIs是W3C组织的标准

DOM

DOM，全称是Document Object Model文档对象模型，是w3c推荐的处理html的标准编程接口。

js是通过一系列DOM接口来对html文档进行操作的，可以改变网页的内容，结构和样式

一套操作页面元素的属性和方法

DOM树

dom是一个以树状结构存在的内容，dom的顶级是Document表示当前文档，因为在pc端的文档是插入浏览器里运行的，所以在pc端，document上面还有一个window

操作dom，从document，各种标签，文本，属性，样式的操作

window下有一个document对不对？答案对

看dom树图片

文档：一个html网页就是一份文档，在DOM中使用document表示
元素：html文档中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签，属性，文本，注释等），在DOM中节点使用node表示

节点是构成html文档的最基本的单元，网页中的每一个部分都可以称为是一个节点，

比如：html标签（元素），属性，文本，注释，整个文档都是一个节点

根据节点的类型不同，对节点进行了分类：比如标签是元素节点，属性是属性节点，文本是文本节点（空格换行也是文本节点），文档是文档节点

js中常用的节点分类
- 文档节点：一个html网页就是一个文档，在DOM中使用document表示
  
  document是页面中最大的节点，只能有一个，是承载所有节点的容器，不属于元素，根节点
- 元素节点：html文档中的所有标签都是元素节点
  - html是一个页面中最大的元素节点，承载所有其他节点，是根元素节点
  - 其他元素节点：
    
    head body div p ul table...都是元素节点，只是不同的标签在页面中表现形式不一样
- 属性节点：元素的属性
  
  属性节点不作为独立节点出现，必须依赖于元素，没有元素，属性节点就是文本
- 文本节点：html标签中的文本内容
  
  每一段文本内容都是一个文本节点，包含空格和换行
  
  一般作为元素节点的子节点存在，用来表示该元素节点在页面上显示的内容
- 注释节点：页面中书写的注释内容
  
  作为独立节点出现，作为说明文本使用
对象：DOM把文档，元素，节点都转换为一个对象
模型：使用模型来表示对象之间的关系，这样可以方便我来获取对象（dom树）
我们获取过来的DOM元素是一个对象，所以称为文档对象模型

节点

节点属性

作用：用来描述这个节点的信息，相同类型的不同节点，有相同的属性名，但是值不一样

节点的类型不同，属性和方法也都不尽相同，一般节点至少拥有nodeType（节点类型），nodeName（节点名），nodeValue（节点值）这三个基本属性
- 文档节点
  - 节点名（nodeName）为#document
  - 节点类型（nodeType）为9
  - 节点值（nodeValue）为null
- 元素节点
  - 节点名（nodeName）为大写标签名（全大写）
  - 节点类型（nodeType）为1
  - 节点值（nodeValue）为null
- 属性节点
  - 节点名（nodeName）为属性名
  - 节点类型（nodeType）为2
  - 节点值（nodeValue）为属性值
- 文本节点
  - 节点名（nodeName）：所有文本节点的名称全部为： #text
  - 节点类型（nodeType）为3
  - 节点值（nodeValue）为文本内容（包括文字，空格和换行）
- 注释节点
  - 节点名：所有注释节点的名称都为 #comment
  - 节点类型（nodeType）为8
  - 节点值：注释内容（包含换行和空格）
在实际开发中，节点操作主要操作的是元素节点