内建对象、自定义对象、宿主对象(DOM、BOM)
目录
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对象已经加载完毕