宿主对象（DOM）
DOM
Document : 表示这个HTML网页文档
Object :表示将网页中每一个部分都转换为了一个对象
Model : 使用模型关系表示对象之间的关系，这样方便获取对象
认识节点
**节点**： Node---构成HTML文档最基本的单元.网页中每一个部分都可以称为一个节点。每个节点都是一个对象。
常用节点分为四类：
文档节点：整个HTML文档元素节点：HTML文档中的HTML标签属性节点：元素的属性文本节点：HTML标签中的文本内容
节点的属性：
节点名称 nodeName nodeType(固定值) nodeValue 文档节点 #document9 null 元素节点 标签名 1 null 属性节点 属性名 2 属性值 文本节点 #text3 ^文本内容$
浏览器已经提供了文档节点对象，这个对象是window的属性。阔以在页面中直接使用，文档节点代表整个网页
console.log("document" in window); //true//获取网页中的button对象
var button = document.getElementById("btn");
console.log(button);事件
就是用户和浏览器之间的交互行为。
- 阔以在事件
对应的属性中设置JS代码.当事件被触发时,这些代码会执行
给对应属性设置JS代码的方法
- 耦合
<!--这种结构和行为耦合,不方便维护.不推荐使用-->
<button id = "btn" onclick ="alert('hello ,world');">button</button>- 分开
为按钮对应事件绑定处理函数的形式,响应事件.当事件被触发时,对应的函数会被调用
//单击响应函数
var btn = document.getElementById("btn");
btn.onclick = function (){
alert("hello,world");
}
文档的加载
浏览器加载一个页面时，按照自上而下的顺序加载。读取到一行就运行一行，如果将script标签写在页面上边，在JS代码执行时，页面还没有加载。- 将JS代码写在中间
<body>标签的下部。优点：加载完DOM对象之后，再加载JS代码。页面加载速度会快一点 - 将JS代码依旧写在
<head>标签里，加一个onload事件。优点：方便管理JS代码.会先加载这些代码，但不执行。
window.onload = function(){
}DOM查询
getElementById()getElementsByTagName()标签名getElementsByName()
2，3获取的对象都保存在类数组中，阔以通过索引访问。
元素.className
元素节点的子节点
getElementsByTagName():通过具体元素节点调用该方法。返回当前节点的指定标签名后代节点
属性：childNodes:表示当前节点的所有子节点【DOM标签之间的空白会被当成文本节点。IE8及以下不会将空白当成子节点】
children 当前元素的所有子元素【元素对应的标签】
firstChild 当前节点的第一个子节点【和childNodes可以获得空白文本一致】
lastChild 当前节点的最后有一个子节点【和childNodes可以获得空白文本一致】
firstElementChild当前节点的第一个子元素。
元素节点的父节点，兄弟节点
previousSubling：前一个兄弟节点【也可以获取到空白内容】
previousElementSubling：前一个兄弟元素
``：
``:
``:
其他属性|方法
document.body:保存的是对标签body的引用
document.documentElement:保存的是html根标签
document.all:保存的是页面所有元素
document.getElementByClassName():根据class属性获取一组元素节点对象，不支持ie8及以下的浏览器
document.querySelector():
- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
- ie8中没有
getElementsByClassName()但是，可以使用querySelector()代替 - 使用该方法总会返回唯一一个元素，如果满足条件的元素有多个，只会返回第一个
documenti.querySelectorAll():方法会将符合条件的元素封装到一个数组中返回，即使只有一个元素，也封装数组
增，删，改
createElement("元素/标签"):需要标签名，作为参数。并将创建好的对象作为参数返回
createTextNode("textStr"):创建文本节点
appendChild(): 父节点.appendChlid(子节点)
insertBefore(newNode,oldNode):在(父)节点中，在old节点前插入新节点
replaceChild(newNode,oldNode):在(父)节点中，将old节点替换为新节点
removeChild(Node):移除子节点
实验一个img标签的原型追溯
img标签
HTMLImageElement
HTMlElement
Element
Node
