JS学习笔记（四）DOM及其他1

0x01 

人好复杂，我还是喜欢二次元

0x02 DOM

document object model:文档对象模型

JS通过dom来对html进行随心所欲的操作

理解什么是模型：

html dom树

节点

节点就是四种对象 

浏览器已经为我们提供文档节点对象

示例：通过文档节点对象获取到button对象，对其进行操作

先获取对象，再对其进行操作

 

0x021 事件

点击按钮是一个事件

改变浏览器页面大小也是事件

鼠标移动也是事件

事件，就是用户和浏览器的交互行为

 

在事件对应的属性中设置一些js代码

（不推荐使用）结构和行为耦合，不方便维护

对应事件绑定函数来响应事件

通过一个回调函数来进行响应

0x022 文档的加载

浏览器加载代码是从上向下的顺序加载的

如果将script标签写到页面上面，在代码执行时，页面还没有被加载

 

可以选用onload事件

为window绑定onload事件。这样可以把js代码写在上面

0x023 DOM查询

获取元素节点

 

0x0231 通过document节点查找：

通过id查找：getElementById

1、为id为btn01的按钮绑定一个单击响应函数

2、通过id属性查找到bj节点

3、打印bj

 

通过标签名查找对象：

getElementsByTagName()

返回的是一个类数组对象

通过name来查询对象：

getElementsBy

通过这个方法来获取所有节点

可以通过读取属性来获得属性值，注意class是保留字 

0x0232 通过具体的元素节点调用：

之前的查询都是居于document对象，下面学习基于具体的元素节点来查询

只有第一个是方法，其他是3个属性

从city节点下面再查子节点

查city所有子节点

使用childNodes会返回包括文本的所有子节点， 也会包括空白文本

这个时候可以用children属性，他能获取所有子元素（不包括文本）

还有fiestChild和lastChild两个属性

 

获取父节点和兄弟节点

 

尝试简化一下过程：为指定元素绑定单击响应函数

（注意：函数也是对象，所以也能作为参数传值）

 

获取父节点：写在刚定义的函数的回调函数里

注意这里使用的innerText，获取文本内容

 

获取兄弟节点

也可以用nodeValue属性获取文本值

0x024 全选练习

示例：

0x025 DOM查询的其他方法

获取body标签

html根标签

获取页面的所有元素

也可以这样写

但一般用第一个

 

根据元素的class属性值查找一组元素节点对象：

通过css选择器获取元素：

querySelector()

css选择器：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors

但是使用该方法只会返回唯一元素

可以使用querySelectorAll()