日考题
1.js包含哪几部分
ES
BOM
DOM

2.什么是BOM
BOM即浏览器对象模型，BOM是操作浏览器的接口(API)

3.BOM有几大对象？

窗口：(Window)
历史记录：( Histroy)
地址栏：(Location)
版本信息：(Navigator)
屏幕：(Screen)

4.DOM是什么
DOM即文档对象模型，DOM是操作文档的接口(API)

5.DOM有几大对象

文档对象：(document)
元素对象：(elment)
文本对象：(text)
属性对象(：Attribute)
节点对象：(node)

JS包含哪几部分

ES：一门语言，学习ES学习的是语法。(ECMA：欧洲计算机协会 ECMAScript)
BOM：浏览器对象模型用途：提供给ES一个接口来操作浏览器
DOM：文档对象模型用途：提供给ES一个接口来操作文档

BOM是什么

BOM: Browser object Model 浏览器对象模型
BOM：把浏览器的一切定义成了一个对象模型
- Window：整个浏览器被定义成了window对象
  - document：把文档定义成一个对象
  - Histroy：把历史记录定义成一个对象
  - Screen：把显示浏览器窗口的屏幕定义成一个对象
  - Location：把地址栏定义成一个对象
  - Navigator：把浏览器的介绍信息定义成一个对象
BOM用途：允许ES操作浏览器的一切
BOM目前没有标准。

DOM是什么

DOM：Dcoumnet object Model 文档对象模型
用途：DOM就是为了操作文档用的。
DOM把文档的一切内容都定义成了对象
- 文档是对象
- 元素是对象
- 文本是对象
- 属性是对象
- 样式是对象
DOM是W3C制定的一套标准。

示意图

1.png

DOM树

示意图

2.png

document对象
element对象
attribute对象
text对象
node对象

Document对象

定义

表示：Document对象表示网页文档
地位：Document对象是DOM的核心对象
用途：Document对象是访问文档的入口

用途

Document对象主要用途，具体内容如下：

查：获取元素
增：创建元素
删：删除元素
改：替换元素

获取元素的方法

传统方法

通过id获取元素: getElementById()

wiondow.document.getElementById('id')
//等同于
document.getElementById('id')

通过标签名获取元素: getElementsTagName('标签')

wiondow.document.getElementsTagName('标签')
//等同于
document.getElementsTagName('标签')

  const ul1 = document.getElementById('ul1')
      const arr1 = ul1.getElementsByTagName('li') //通过element获取
      console.log(arr1)

H5新增方法

通过class获取元素： document.getElementsByClassName('class')
element.ElementsByClassName('class')
通过css选择器获取元素：document.querySelector('Selector')
通过css选择器获取元素： document.querySelectorAll('SelectorAll')

特殊方法

document.documentElement：获取文档中的<html>元素
document.body：获取文档在中的<body>元素
document.head：获取文档在中的<head>元素
document.title：获取文档在中的<title>元素
document.links：获取文档中的<a>元素
document.images：获取文档中的<img>元素
document.forms: 获取文档中的<forms>元素 //表单

操作文档内容

在获取玩元素之后，接下来我们要学习元素对象之间的关系。DOM定义了两套API：

Node API(节点API)：把DOM树中的对象看成节点(node)
Element API(元素API)：把DOM树中的对象看成元素树。

Node API

定义

Node API把文档中的一切对象看成是节点(node)。Node对象是

用途

查找节点的基本信息：节点名称、节点类型、节点的值
查找节点之间的关系：父子、兄弟
操作节点：增、删、改、查

三大基本属性

Node.nodeType

定义：nodeType表示节点类型。节点类型使用一个数字表示。Node API把节点类型分为了9种：

节点名称	数字表示
元素节点	1
属性节点	2
文本节点	3
注释节点	8
文档节点	9

Node.nodeName：节点名称
Node.nodeValue：节点值
NodeType：节点对应数字

节点关系

父节点：一个节点之上的直接节点
子节点：一个节点之下的直接节点
兄弟节点：具有相同父节点的节点
后代节点：一个节点之下的所有层级的节点

查找节点关系

Node.parentNode：返回当前节点的父节点对象
Node.childNodes：返回当前节点的子节点列表
Node.nextSibling：返回当前节点的下一个兄弟节点
Node.previousSibling：返回当前节点的上一个兄弟节点
Node.firstChild：返回当前节点的第一个子节点
Node.lastChild：返回当前节点的最后一个子节点

2023-02-10 DOM