-3宿主对象：游浏览器运行环境提供的对象 DOM BOM
DOM:Document Object Model 文档对象模型
JS通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作web页面 网页中有各种标签，就通过DOM来操作
文档：整个html网页
对象：将网页中的每一个部分都转换为一个对象 以对象的方式操作属性方法
模型：使用模型表示对象之间的关系，这样方便我们获取对象
节点Node是构成我们网页最基本的元素的组成部分，网页中的每一个部分都可以称为一个节点，比如html标签、属性、文本、注释、整个文档都是一个节点
虽然是节点但是具体类型是不同的，比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点html中的内容、文档称为文档节点html文档
浏览器已经为我们提供了文档节点，对象这个对象是window属性，可以在页面中直接使用，文档节点代表整个网页 document就是文档节点，代表整个网页，文本属于模型的最高点，找到它就可可以找到所有对象，通过它我们可以获取到网页中的任意一个对象
获取button对象
var btn=document.getElementById（“btn”）；
修改按钮的文字
console.log（btn.innerHTML）；//按钮上的文字数出来
btn.innerHTML=“Im Button”//修改内部标签按钮的文字
事件：
事件就是文档或浏览器窗口之中发生的一些特定的交互瞬间
JavaScript与html之间的交互是通过事件实现的，对于web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上个某个键等等
事件发生后处理事件：
我们可以在事件对应的属性中设置一些js代码，这样当事件触发时，这些代码将会执行
这种写法我们称为叫做结构和行为耦合，不方便维护，不推荐使用
在script标签中写
我们可以为按钮对应的事件绑定函数的形式来响应事件
<button id=”btn” οnclick=”alert(’你好’)”>我是一个按钮</btn>
<script>
获取button对象
var btn=document.getElementById（“btn”）；
console.log（btn）；
我们可以为按钮对应的事件绑定函数的形式来响应事件，这样当事件触发时，其对应的函数会执行
//绑定一个单击事件
btn.οnclick=function（）{
alert（“你好”）；
}
</script>
DOM Event
onblur 失去焦点
onchange 域的内容被改变
onclick 当用户点击某个对象时调用时间句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onerror 当加载文档或图像时发生错误
onfocus 元素获得焦点
onkeydown 某个键盘按键被按下
onkeypress 某个键盘被按下并松开
onkeyup 某几个键盘按键北松开
onload 一张页面或图片加载完成
onmousedown 鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某个元素一开
onmouseover鼠标移到某元素上
onmouseup 鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被重新调整大小
onsubmit 确认按钮被点击
onunload 用户退出页面
4.
文档的加载
浏览器在加载一个页面的时候，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到也免得上边，在代码执行时，页面还没有加载DOM对象也没有加载，会导致无法获取到DOM对象，里面的button还没有加载，所获取到的btn对象为空
<body>
<button id=”btn”>点我一下</b>
//将js标签写在页面的下部既是为了，可以在页面加载完毕以后在运行js代码
<script>
获取button对象
var btn=document.getElementById（“btn”）；
console.log（btn）；
//绑定一个单击事件
btn.οnclick=function（）{
alert（“你好”）；
}
</script>
</body>
那么我们还是希望将js代码放到页面上边，
那么我们希望整个页面加载完成之后在执行，那么onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件,改事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
<script>
Window.οnlοad=function（）{
获取button对象
var btn=document.getElementById（“btn”）；
console.log（btn）；
//绑定一个单击事件
btn.οnclick=function（）{
alert（“你好”）；
}
}
</script>
节点的属性
nodeName nodeType nodeValue
文档节点 #document 9 null
元素节点 标签名 1 null
属性节点 属性名 2 属性值
文本节点 text 3 文本内容
DOM查询
获取元素节点
通过document对象调用
1getElementById(“”) 通过id属性获取一个元素节点对象
2.getElementsByTagName（“”） 通过标签名获取一组元素节点对象
3.getElementsByName（“”） 通过name属性获取一组元素节点对象，获取表单项
获取元素节点的子节点
通过具体的元素节点调用：
- getElementsByTagName（）方法 返回当前节点的指定标签名后代节点
- childNodes 属性 表示当前节点的所有子节点
- firstChild 属性 表示当前节点的第一个子节点
//列表项有空格获得空格
- lastChild 属性 表示当前节点的最后一个子节点
获取父节点和兄弟节点：
通过具体的节点调节：
1parentNode 属性，表示当前节点的父节点
2previousSibling 属性，表示当前节点的前一个兄弟节点
3nextSibling 属性，表示当前节点的后一个兄弟节点
DOM查询的其他方法：
获取body标签
var body=document. getElementsByName（“body”）[0];
console.log（body）；
还有一种方法：
在document中有一个属性body，他保存的是body的引用
var body=document.body；
console.log（body）；
document.documentElement 保存的是html的跟标签
document.all 代表页面中的所有元素标签
var body=document. getElementsByTagName（“*”） 获取页面的所有元素
根据元素的class属性值查询一组元素节点：但是此方法不支持IE8及以下的浏览器
var box1=document. getElementsByClassName（“box1”）
document.querySelector（） 可以根据选择器 的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象， 虽然IE8中没有getElementsByClassName但是可以使用quarySelector（）
使用该方法只会返回唯一的一个元素，如果满足条件的元素有多个，那么他只会返回第一个元素
documet.querySelectorAll（）该方法跟querySelector类似，不同的是将符合条件的元素封装到一个素组中返回，即是符合条件的元素只有一个，它也会返回数组
DOM增删改的方法：
appendChild（） 把新的节点添加到指定的节点。
向一个父节点中添加一个新的子节点
用法 ：父节点.appendChild（子节点）；
removeChild（） 删除子节点
语法：父节点.removChild（子节点）
replaceChild（） 替换子节点
使用指定的子节点替换已有的节点
语法：父节点.replaceChilld（新节点，子节点）
insertBefore（） 将指定的子节点前面插入新的子节点
在指定的子节点前插入新节点
语法：父节点.insertBefore（新节点，子节点）
createElement（） 创建元素节点
可以创建一个元素节点对象，他需要一个标签名作为参数，将会根据该标签名创建一个节点对象，并将节点对象作为参数返回
语法：var li = document.createElement("li");
createTextNode（） 创建文本节点
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
var gztext = document.createTextNode("广州");
getAttribute（） 返回指定的属性值
setAttribute（） 把指定属性设置或修改为指定的值
createAttribute（）创建属性节点
confirm（“”）含有确认与取消按钮的提示框，需要字符串作为参数，
当我们点击确认返回true，点击取消返回false
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
