事件
对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.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)