JavaScript基础进阶——WebAPI—DOM基础

目录

 

1、DOM简介

1、DOM概念

1、DOM的含义

2、基本概念

2、获取元素

2.1、DOM提供的API方法：

5.2、H5提供的新方法

6、获取特定标签

3、操作元素

1、修改元素

1、修改元素内容

 2、修改元素属性

 3、修改元素样式

4、获取元素的属性值

5、设置元素的属性值

 6、自定义属性

7、修改表单属性

4、事件

1、事件三要素

2、事件执行过程 

5、节点操作

5.1、为什么要用节点获取元素 

 5.2、节点概述

5.3、节点层次

5. 4、兄弟节点

5.5、创建节点

5.6、删除节点

5.7、复制节点（克隆节点）

1、DOM简介

1、DOM概念

1、DOM的含义

DOM是Document Object Model 文档对象模型 是Javascript操作文档的接口，是处理可扩展标记语言的标准编程接口。可以通过WC3定义的Dom接口，来改变HTML的结构、样式和内容。

可以将HTML文档表示为文档树 整个文档就对应一个document对象。

获取过来的DOM元素都是一个对象（object），因此被称为 文档对象模型。

2、基本概念

文档（document）：一个页面就是一个文档

元素（element）：页面中的所有标签都是元素

节点（node）：网页中的所有内容都是节点（标签，属性，文本，注释等）

在DOM中，文档中的所有内容都是节点。

直白的说就是DOM对象是网页的所有对象，我们可以通过操作DOM对象来操作网页

2、获取元素

2.1、DOM提供的API方法：

1、getElementbyId()

通过id获取元素

2、getElementsByTagName（）

通过标签获取指定标签名的对象的集合

返回时数组 如果没有整个标签 则返回一个空的伪数组

3、getElementByClassName() //h5新增

通过类名获取

5.2、H5提供的新方法

4、querySelector（）

返回指定选择器的第一个元素 需要加符号 . #

5、querySelectorAll（）

返回指定标签的所有元素

6、获取特定标签

body:document.body
html:document.documentElement

3、操作元素

1、修改元素

1、修改元素内容

//都可读写

 innerHTML = ' 修改的内容'
保留html标签的内容 空格和换行也保留

innerText  = ' 修改的内容'
从起始位置到终止位置的内容 去除html标签 空格和换行也会去掉

 2、修改元素属性

element（元素名）.属性 = ' '

src id href title 等

 3、修改元素样式

• element.style （行内样式修改）修改元素单个样式
• element.className = 'classname'  修改元素的className 适合多个样式 会覆盖原来的类名  // element.className = '原类名 classname' 多类名选择器 可保留原类名

4、获取元素的属性值

• element.属性名
  主要是内置属性
• element.getAttribute（’属性名‘）
  自定义属性

5、设置元素的属性值

• element..属性名 = ’‘
• element.setAtrribute（’属性名‘，值）

 6、自定义属性

程序员内部自定义的属性 规定命名方式 以区分是否为自定义属性

data-开头

7、修改表单属性

 利用DOM操作表单属性：type、value、checked、selected、disabled

8、

4、事件

1、事件三要素

事件源：什么被触发
事件类型：是按钮还是其他
事件处理程序：通过函数赋值来处理事件

2、事件执行过程 

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

5、节点操作

5.1、为什么要用节点获取元素 

利用节点层级关系获取元素

• 利用父子兄节点关系获取元素
• 逻辑性强 兼容性较差

Dom树中的所有节点都可以通过javascript来操作 （修改、删除、创建） 

 5.2、节点概述

 节点类型（nodeType）、节点名称（nodeName）、节点值（nodeValue）

• 元素节点  nodeType 1
• 属性节点 nodeType 2
• 文本节点 nodeType 3（包含文字、空格、换行等）

5.3、节点层次

 5.3.1、父级/子级节点

Dom把节点划分不同的层级关系，最常用的是父子级关系

子节点：

childNodes 返回所有子节点 包括元素、文本节点，因此不推荐使用

父节点.children 获取所有的子元素节点 //常用

获取第一个子节点

父节点.firstChild 不管是文本节点还是元素节点

父节点.firsElementtChild 获取第一个元素节点

获取最后一个子节点

父节点.lastElementChild 不管是文本节点还是元素节点

 

5. 4、兄弟节点

node.nextSibling 下一个兄弟节点，包括元素节点 、文本节点等

node.nextEelementSibling 得到下一个兄弟节点的元素节点

5.5、创建节点

 5.5.1、创建节点元素

node.createElement（）

5.5.2、添加节点

node.appendChild（） //node 父级节点 在原先节点的后面添加新节点

node.insertBefore（child，指定元素） 在原先节点的前面添加节点

 

5.6、删除节点

node.removeChild(node.child)  node为父节点

5.7、复制节点（克隆节点）

node.cloneNode()   node是父节点

括号为空或者是false 为浅拷贝 不复制内容和子节点

为true 则是深拷贝 会复制所有内容