DOM

事件

对button标签绑定了一个单击事件

<button onclick="alert('hello world')">按钮</button>

对div标签绑定了鼠标移入的事件

<div onmouseover="alert('hello javascript')"></div>

文档加载

1- 浏览器加载页面时，自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的顶部
在执行代码时，页面没有加载，页面也没有加载dom对象
就会导致无法获取dom对象
2- onload 事件在整个页面加载完成之后才触发
可以给window绑定onload事件
此事件的回调处理函数在页面加载完成时候执行
确保咱们可以执行所有的dom对象

window.onload = function(){
				var id = document.getElementById("btn")
				console.log(id)
			}

html dom元素访问
根据指定id信息获取元素对象，返回:对象

var btn = document.getElementById("btn")
console.log(btn)

根据指定标签信息获取元素对象的集合 返回:数组

var button = document.getElementsByTagName("button")
console.log(button)

根据指定name信息获取元素对象，返回:数组

var btn1 = document.getElementsByName("btn1")
console.log(btn1)

根据指定class信息获取元素对象，返回:数组

var c1 = document.getElementsByClassName("c1")
console.log(c1)

根据选择器获取指定元素信息, 返回:匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。

document.querySelector("")

document.querySelectorAll()返回的不是一个数组，而是一个NodeList

 document.querySelectorAll("")

全选全不选

功能：
①全选按钮：点击后所有爱好都选中 – 1.#checkedAllBtn
②全不选按钮：点击后所有爱好都选中 – 2.#checkedNoBtn
③反选按钮：点击后所有爱好选中状态反转 – 3.#checkedRevBtn
④提交按钮：点击后依次弹出选中内容 – 4.#sendBtn
⑤全选框：点击后让所有爱好的选中状态和自己一致 – 5.#checkedAllBox
⑥爱好框：点满后将全选框选中，否则取消选中 – 6.items

获取四个多选框

        // 获取四个多选框
		var items = document.getElementsByName("items")
		// console.log(items)
		// 获取多选框 全选全不选
		var checkedAllBox = document.getElementById("checkedAllBox")

全选

// 获取全选按钮
		var checkedAllBtn = document.getElementById("checkedAllBtn")
		// console.log(checkedAllBtn)
		// 给全选按钮注册点击事件
		checkedAllBtn.onclick = function(){
			// 事件触发时
			// 遍历每一个爱好
			for(var i = 0; i < items.length; i++){
				// alert(items[i].checked)
				// 将每一个爱好的状态设置为 默认选中 
				items[i].checked = true
			}
			// 全选全不选多选框为 选中状态
			checkedAllBox.checked = true
		}
		

全不选

// 获取全不选按钮
		var checkedNoBtn = document.getElementById('checkedNoBtn')
		// 给全不选按钮注册点击事件
		checkedNoBtn.onclick = function(){
			// 事件触发时
			// 遍历每一个爱好
			for(var i = 0; i < items.length; i++){
				// alert(items[i].checked)
				// 将每一个爱好的状态设置为 默认不选中 
				items[i].checked = false
			}
			// 全选全不选多选框为 不选中状态
			checkedAllBox.checked = false
		}

全选全不选

// 给全选全不选多选框注册点击事件
		checkedAllBox.onclick=function(){
			// console.log(this.checked)
			// 事件触发时
			// 遍历每一个爱好
			for(var i=0;i<items.length;i++){
				//将全选全不选多选框的值赋值给每一个爱好多选框
				items[i].checked = this.checked
				// console.log(items[i].checked)
			}
		}

提交按钮 ：当点击提交按钮时 选中的都弹窗

var sendBtn = document.getElementById("sendBtn")
		console.log(sendBtn)
		sendBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				if(items[i].checked){
					alert(items[i].value)
				}
			}
		}

反选

// 获取反选按钮
		var checkedRevBtn = document.getElementById("checkedRevBtn")
		checkedRevBtn.onclick = function(){
			checkedAllBox.checked = true
			for(var i = 0; i < items.length;i++){
				/* if(items[i].checked){
					items[i].checked = false
				}else{
					items[i].checked = true
				} */
				items[i].checked = !items[i].checked;
			}
		}

items
如果四个多选框都被选中，则checkedAllBox选中
如果四个多选框都被没选中，则checkedAllBox没选中

// 遍历四个爱好多选框 并给其绑定事件
for(var i = 0; i < items.length;i++){
			items[i].onclick = function(){
				checkedAllBox.checked = true
				for(var j = 0; j < items.length;j++){
					if(!items[j].checked ){
						// 全选全不选多选框设置为 false
						checkedAllBox.checked= false
						break;
					}
				}
			}
		}

dom查询的其他方法

获取body标签

var body = document.getElementsByTagName("body")[0]
console.log(body)

body也是document对象的一个属性 ,保存的是body的引用

var body1 = document.body
console.log(body1)

获取html根标签

var html = document.documentElement;
console.log(html)

获取页面中所有的元素

var all = document.all
console.log(all)

根据类名获取指定元素对象

document.getElementsByClassName(c1)

dom查询

var ul = document.getElementsByTagName("ul")[0]

获取ul下所有的子元素

var children1 = ul.children
console.log(children1)

获取ul下所有的子节点

var children2 = ul.childNodes
console.log(children2)

获取ul的父节点

var parent1 = ul.parentNode
console.log(parent1)

获取ul的父元素

var parent2 = ul.parentElement
console.log(parent2)

获取ul的第一个子节点

var first1 = ul.firstChild
console.log(first1)

获取ul的第一个子元素

var first2 = ul.firstElementChild
console.log(first2)

获取ul的上一个兄弟节点

var brother1 =  ul.previousSibling
console.log(brother1)

获取ul的下一个兄弟节点

var brother2 =  ul.nextSibling
console.log(brother2)

获取ul的上一个兄弟元素

var brother3 =  ul.previous


**获取ul的上一个兄弟元素**




```javascript
var brother3 =  ul.previousElementSibling
console.log(brother3)

获取ul的下一个兄弟元素

var brother4 =  ul.nextElementSibling
console.log(brother4)

dom增删查

创建一个元素

var p = document.createElement("p")
console.log(p)

创建一个新的文本节点

var text = document.createTextNode("erhuo")
console.log(text)

给p标签添加一个节点

p.appendChild(text)

将p添加到li之前

ul.insertBefore(p,li)

将li元素删除

ul.removeChild()

替换节点

ul.replaceChild()

读取元素的样式

正常浏览器
- 使用getComputedStyle()
- 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
参数：
1.要获取样式的元素
2.可以传递一个伪元素，一般传null

btn.onclick = function(){
var obj = window.getComputedStyle(div,null)
console.log(obj.width)
console.log(obj.backgroundColor)
//通过该方法读取到样式都是只读的不能修改
//obj.width = "500px"
var g = getStyle(div,"width")
console.log(g)
}

定义一个函数：获取指定的元素信息
参数1： 指定获取元素信息的元素
参数2： 获取元素的样式名

function getStyle(element,name){
	 if(window.getComputedStyle){
		return window.getComputedStyle(element,null)[name]
     }else{
		return element.currentStyle.name
    }
}

其他的样式操作属性

1- 获取到元素的宽高时 值得类型是Number 不带px 可以直接进行运算
2- 获取元素的宽度和高度，包含内容与内边距
3- 获取的都是可见的宽高
4- 属性是不能进行修改的

clientHeight
- 元素的可见高度，指元素的内容区和内边距的高度
- clientWidth
- 元素的可见宽度，指元素的内容区和内边距的宽度

var height = dv1.clientHeight
 var width = dv1.clientWidth
console.log(height,width)

offsetHeight
- 整个元素的高度，包括内容区、内边距、边框
offfsetWidth
- 整个元素的宽度，包括内容区、内边距、边框

var height = dv1.offsetHeight
 var width = dv1.offsetWidth
console.log(height,width)

offsetParent
- 当前元素的定位父元素
- 离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body

var parent = dv1.offsetParent
console.log(parent)
// var parent = dv2.offsetParent
// console.log(parent)
// console.log(parent.id)

offsetLeft
offsetTop
- 当前元素和定位父元素之间的偏移量
- offsetLeft水平偏移量 offsetTop垂直偏移量

 var left = dv1.offsetLeft
 var top = dv1.offsetTop
 console.log(left,top)

scrollHeight
scrollWidth
- 获取元素滚动区域的高度和宽度

var height = dv2.scrollHeight
var width = dv2.scrollWidth
console.log(width,height)

判断滚动条是否滚动到底

//垂直滚动条
scrollHeight-scrollTop = clientHeight
//水平滚动	
scrollWidth-scrollLeft = clientWidth

scrollTop
scrollLeft
- 获取元素垂直和水平滚动条滚动的距离
- 判断滚动条是否滚动到底

var left = dv1.scrollLeft
var top = dv1.scrollTop
console.log(top,left)