DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
DOM(Document Object Model):
称为文档对象模型
文档： 表示的是整个HTML网页文档
对象：表示将网页中的每一个部分都转换为一个对象
模型：表示对象之间的关系
节点：
Node是构成我们网页的最基本的组成部分
网页中的每一个部分都可以称为是一个节点。
比如: html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点，但是实际上他们的具体类型是不同的。
比如∶
标签我们称为元素节点
属性称为属性节点
文本称为文本节点
文档称为文档节点
节点的类型不同，属性和方法也都不尽相同。
浏览器已经为我们提供文档节点对象，这个对象是window属性
可以在页面中直接使用,文档节点代表的是整个网页
事件:
就是文档或浏览器窗口中发生的一些特定的交互瞬间。
JavaScript 与HTML之间的交互是通过事件实现的。
对于Web应用来说，有下面这些代表性的事件∶
点击某个元素
将鼠标移动至某个元素上方
按下键盘上某个键...
我们可以在事件对应的属性中设置一些js代码,
这样当事件被触发时,其对应的函数将会被调用
绑定一个单击事件：
像这种为单击事件绑定的函数，我们称为单击响应函数
DOM相关的方法：
getElementByld()
通过id属性获取一个元素节点对象
getElementsByTagName()
通过标签名获取一组元素节点对象
这个方法会给我们返回一个类数组对象，
所有查询到的元素都会封装到对象中
即使查询到的元素只有一个，也会封装到数组中返回
childNodes
属性，表示当前节点的所有子节点
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签标签间空白也会当成文本节点
childien
属性，可以获取当前元素的所有子元素
firstChild
属性，表示当前节点的第一个子节点
包括空白文本节点
firstElementChild
获取当前元素的第一个子元素
lastChild
属性，表示当前节点的最后一个子节点
parentNode
属性，表示当前节点的父节点
previousSibling
属性，表示当前节点的前一个兄弟节点
nextSibling
属性，表示当前节点的后一个兄弟节点
getElementsByName()
通过name属性获取一组元素节点对象
文档节点.innerHTML
innerHTML用于获取元素内部的HTML代码
对于自结束标签,这个属性没有意义
如果需要读取元素节点属性
直接使用元素.属性名
例如：元素.id 元素.name 元素.value
注意:class属性不能采用这种方式
读取class属性时需要使用元素.className
文档节点.innerText
该属性可以获取到元素内部的文本内容
它和innerHTML类似,不同的是它会自动将html去除
在document中有一个属性body，它保存的是body的引用
var body = document.body;
document.documentElement保存的是html根标签
var html = document.documentElement;
document.all
代表页面中所有的元素
document.querySelector()
需要一个选择器的字符串作为参数
可以根据一个CSS选择器来查询一个元素节点对象
使用该方法总会返回唯一的一个元素，
如果满足条件的元素有多个，那么它只会返回第一个
document.querySelectorAll(()
该方法和querySelector()用法类似
不同的是它会将符合条件的元素封装到一个数组中返回
即使符合条件的元素只有一个，它也会返回数组
document.createElement()
可以用于创建一个元素节点对象,
它需要一个标签名作为参数,
将会根据该标签名创建元素节点对象,
并将创建好的对象作为返回值返回
document.createTextNode()
可以用来创建一个文本节点对象
需要一个文本内容作为参数，
将会根据该内容创建文本节点,并将新的节点返回
appendchild()
向一个父节点中添加一个新的子节点
用法:
父节点.appendChild(子节点);
insertBefore()
可以在指定的子节点前插入新的子节点
语法:
父节点.insertBefore(新节点,旧节点);
replacechild()
可以使用指定的子节点替换已有的子节点
语法:
父节点.replaceChild(新节点,旧节点);
removeChild()
可以删除一个子节点
语法:
父节点.removeChild(子节点);
通过JS修改元素的样式:
语法:
元素.style.样式名 = 样式值
注意:
如果CSS的样式名中含有-，
这种名称在JS中是不合法的比如background-color
需要将这种样式名修改为驼峰命名法，
去掉-，然后将-后的字母大写
我们通过style属性设置的样式都是内联样式，
而内联样式有较高的优先级，
所以通过JS修改的样式往往会立即显示
但是如果在样式中写了!important，则此时样式会有最高的优先级，
即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
所以尽量不要为样式添加!important
读取元素的样式
语法:
元素.style.样式名
我们通过style属性设置的样式都是内联样式
无法读取样式表中的样式
获取元素的当前显示的样式
语法:
元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式
如果当前元素没有设置该样式,则获取它的默认值
currentstyle只有IE浏览器支持,其他的浏览器都不支持
在其他浏览器中可以使用getComputedstyle()这个方法
来获取元素当前的样式这个方法是window的方法，可以直接使用
需要两个参数
第一个:要获取样式的元素
第二个:可以传递一个伪元素，一般都传null
该方法会返回一个对象,对象中封装了当前元素对应的样式
*/
/*
为window绑定一个onload事件
onload事件会在整个页面加载完成之后才触发
该事件对应的响应函数将会在页面加载完成之后执行，
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
*/
document.onload = function () {
// 整个网页的文档节点
console.log(document);//输出 整个文档节点
// 通过id获取指定的文档节点
var btn = document.getElementById("btn");
console.log(btn);//输出 按钮节点
// 可以为按钮的对应事件绑定处理函数的形式来响应事件
btn.onclick = function () {
// 修改指定节点的内容
btn.innerHTML = "BanQ";
}
}
/*
其他样式的相关属性：
clientWidth
clientHeight
这两个属性可以获取元素的可见宽度和高度
这些属性都是不带px的,返回都是一个数字，可以直接进行计算
会获取元素宽度和高度，包括内容区和内边距
offsetWidth
offsetHeight
获取元素的整个的宽度和高度,包括内容区、内边距和边框
offsetParent
可以用来获取当前元素的定位父元素
会获取到离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则返回body
offsetLeft
当前元素相对于其定位父元素的水平偏移量
offsetTop
当前元素相对于其定位父元素的垂直偏移量
scrollLeft
可以获取水平滚动条滚动的距离
scrollTop
可以获取垂直滚动条滚动的距离
当满足scrollHeight - scrollTop == clientHeight
说明垂直滚动条滚动到底了
当满足scrollWidth - scrollLeft == clientWidth
说明水平滚动条滚动到底了
*/
</script>
</head>
<body>
<button id="btn">我是一个按钮</button>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
事件：
onmousemove
该事件将会在鼠标在元素中移动时被触发
clientX
可以获取鼠标指针的水平坐标
cilentY
可以获取鼠标指针的垂直坐标
事件对象：
当事件的响应函数被触发时，
浏览器每次都会将一个事件对象作为实参传递进响应函数
在事件对象中封装了当前事件相关的一切信息，
比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向。。
解决事件对象的兼容性问题
event = event || window.event;
事件的冒泡(Bubble)：
所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，
其祖先元素的相同事件也会被触发
在开发中大部分情况冒泡都是有用的
如果不希望发生事件冒泡可以通过事件对象来取消冒泡
可以将事件对象的cancelBubble设置为true，即可取消冒泡
event.cancelBubble = true;
事件的委派：
指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，
会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
target
event中的target表示的触发事件的对象
事件的绑定：
使用 对象.事件= 函数的形式 绑定响应函数,
它只能同时为一个元素的一个事件绑定一个响应函数,
不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
事件的字符串，不要on
回调函数,当事件触发时该函数会被调用
是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
事件的传播：
事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标胎段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件，
可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在描获阶段触发事件，所以这个参数一般都是false
*/
</script>
</head>
<body>
</body>
</html>
