DOM、事件、文档加载

内建对象、自定义对象、宿主对象（DOM、BOM）

目录

1.DOM（Document Object Mod

1）DOM查询

A.获取元素节点：通过document对象调用

B.获取元素的子节点：通过具体元素节点调用

C.document属性

D.dom增删改

2.事件

3.文档的加载

---

1.DOM（Document Object Mod

节点：html文档基本单元（文档、元素、属性、文本节点）

浏览器提供文档节点对象：window属性，可在网页直接使用，代表整个网页

---

1）DOM查询

A.获取元素节点：通过document对象调用

getElementById()

通过id属性获取一个元素节点对象

getElementsByTagName()

标签名-一组（返回数组对象，即使只有一个对象）

getElementsByName()

name-一组

var sj1 = document.getElementById("btn");
btn.onclick = function(){
alert(sj1.innerHTML);
};

innerHTML 通过这个属性可以获取元素内部的html代码，对自结束标签这个属性没有意义

读取属性：元素.属性名，但class属性不能采用这种方式，读取class用classname

---

B.获取元素的子节点：通过具体元素节点调用

getElementsByTagName()

方法，返回当前节点的指定标签名后代节点

childNodes

属性，返回当前节点的所有子节点（包括文本节点eg标签间的空白）

Children

属性，返回当前节点的所有子元素（所有浏览器兼容）

firstChild

属性，返回当前节点的第一个子节点（包括文本节点eg标签间的空白）

firstElementChild不支持IE8及以下游览器

lastChild

属性，返回当前节点的最后一个子节点

---

C.document属性

获取body标签

window.onload = function(){

var body = document. getElementsByTagname(“body”)[0];

console.log(body);

};

document的body属性

var body = document.body;

html根标签

document. documentElement

 

all页面中所有元素

document.all;

all = document.getElementsByTagName(“*”);

 

根据属性值获取一组元素节点对象，不支持IE8及以下的浏览器

document.getElementsByClassName

 

需要一个选择器的字符串作为参数，根据一个CSS选择器来查询一个元素节点对象,支持IE8

使用该方法总会返回唯一的元素，如果满足条件的元素有多个，那它只能返回一个

document.querySelector(“.box1 div”)

返回多个满足条件的元素

document.querySelectorAll(“.box1”)

 

D.dom增删改

document.createElement()

可以用于创建一个元素节点对象

需要一个标签名作为参数，将会根据该标签名创建元素节点对象

将创建好的对象作为返回值返回

 

document.createTextNode()

创建文本节点对象

需要一个文本内容作为参数，将会根据该内容创建文本节点并将新的节点返回

appendChild()

像一个父节点中添加一个新的子节点

用法：父节点.appendChild(子节点)

insertBefore()

可以在指定的子节点前插入新的子节点

语法：

父节点. insertBefore(新节点,旧节点);

replaceChild()

可以使用指定子节点替换已有节点

语法：

父节点. insertBefore(新节点,旧节点);

removeChlid()

删除一个子节点

语法：

父节点.removeChild(子节点);

parentNode.removeChild

找父节点

语法：

子节点.parentNode.removeChild

.innerHTML

读取city内的HTML代码

一般两种方式结合使用

 

2.事件

文档或浏览器窗口发生的一些特定交互瞬间

可在事件对应属性中设置js代码，但不推荐（结构与行为耦合）

可在事件对应绑定函数的形式响应事件，推荐使用

btn.onclick = function(){
alert("响应事件");
};

3.文档的加载

浏览器加载页面：自上往下

将js代码放到函数下：确保页面加载完后执行js代码

将js代码放在函数前：

onload事件会在整个页面加载完成之后才被触发

为window绑定一个onload事件，可确保代码执行时所有DOM对象已经加载完毕