DOM

DOM

1.html标签 == 元素 == 节点 Element

	  1- 获取button按钮的元素对象 并将内容修改为 i love button
	  2- 通过循环修改多个a链接的内容

2.根据id获取指定元素(标签)对象,将数据存储到本地变量a中

console.log(document.getElementById("a"))

3.修改标签之间的内尔用

var a = document.getElementById("a")

事件

1.在事件对应的属性中设置一些js代码
当事件触发时,执行此代码
此种方式我们成为结构与行为的耦合
不方便维护 ,不推荐使用

  1. 对button标签绑定了一个单击事件
<button onclick="alert('hello world')">按钮</button>

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

div onmouseover="alert('hello javascript')"></div>
<div style="width:100px;height:200px;background:pink"></div>
<button id="btn">你敢点我下试试</button>

4.根据指定id获取元素对象

var btn = document.getElementById("btn")

5.对btn元素对象注册单击事件, 当事件触发时 执行回调处理函数

btn.onclick = function(){
    alert("试试就试试")
}

文档加载

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

DOM元素访问

1.根据指定id信息获取元素对象,返回:对象

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

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

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

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

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

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

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

5.根据id名称获取指定元素button,返回一个button对象

var btn = document.getElementById("button")
var btn = document.getElementsByTagName("button")[0]
  1. 根据标签名称获取指定元素p ,返回一个数组 数组中包含多个p对象
var p = document.getElementsByTagName("p")
  1. 给btn注册单击事件
btn.onclick = function(){
// 当事件触发
// 循环遍历数组中的每一个元素 
for(var i=0;i < p.length;i++){
// console.log(p[i])
// 设置元素的内容为 hello kitty
p[i].innerHTML = "hello kitty"
 }
}

全选全不选

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

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

3.全选

// 获取全选按钮
		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
		}

4.全不选

// 获取全不选按钮
		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
		}
		
  1. 全选全不选
// 给全选全不选多选框注册点击事件
		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)
			}
		}
		
  1. 反选
// 获取反选按钮
		var checkedRevBtn = document.getElementById("checkedRevBtn")
		// 给反选按钮注册点击事件
		checkedRevBtn.onclick = function(){
			// 全选全不选多选框为 选中状态
			checkedAllBox.checked= true
			// 事件触发时
			// 遍历每一个爱好
			for(var i=0;i<items.length;i++){
				/* 
				//判断多选框
				if(items[i].checked){
					// 如果当前多选框的状态为 true 则赋值为false
					items[i].checked = false
				}else{
					// 如果当前多选框的状态为 false 则赋值为true
					items[i].checked = true
				} */
				
				// 将当前多选框的状态值取反后在赋值回去
				items[i].checked = !items[i].checked
				// 判断当前多选框的状态是否有为假的状态,如果四个爱好中有一个没有选中则,将  
				// !true false  !false = true 
				if(!items[i].checked ){
					// 全选全不选多选框设置为 false
					checkedAllBox.checked= false
					// break;
				}
				
			}
			// 判断四个多选框是否全部选中
		}

7.提交按钮 :当点击提交按钮时 选中的都弹窗

	var sendBtn = document.getElementById("sendBtn")
		sendBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				if(items[i].checked){
					alert(items[i].value)
				}
			}
		}
		
  1. 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;
					}
				}
			}
		}
		
	}

9.根据id 返回 对象

document.getElementById()  
  1. 根据类名 返回 数组
document.getElementsByClassName()

11.根据name属性值 返回 数组

document.getElementsByName()

12.根据标签 返回 数组

document.getElementsByTagName()

DOM查询的其他方式

1.获取body标签

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

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

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

3.获取html根标签

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

4.获取页面中所有的元素

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

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

document.getElementsByClassName(c1)

7.根据选择器获取指定元素信息 querySelector

var q = document.querySelector(".c1")
			console.log(q)
			
var q1 = document.querySelectorAll(".c1")
			console.log(q1)
			console.log(q1[0])

DOM查询

1.查找#bj节点

var bj = document.getElementById("bj")

2.通过innerHTML这个属性可以获取元素内部内容

	alert(bj.innerHTML)
				}

3.查找所有li节点

var btn02 = document.getElementById("btn02")
				btn02.onclick = function(){
					//查找所有li节点
					var list = document.getElementsByTagName("li")
					console.log(list)
					for(var i = 0; i < list.length;i++){
						alert(list[i].innerHTML)
					}
				}

4.查找name=gender的所有节点

var btn03 = document.getElementById("btn03")
				btn03.onclick = function(){
					//查找所有li节点
					var genders = document.getElementsByName("gender")
					// console.log(genders)
					for(var i = 0; i < genders.length;i++){
						alert("hello")
					}
				}			

5.查找#city下所有li节点

var btn04 = document.getElementById("btn04")
				btn04.onclick = function(){
					查找#city下所有li节点
					var city = document.getElementById("city")
					console.log(city)
					var list = city.getElementsByTagName("li")
					for(var i = 0; i < list.length;i++){
						alert(list[i].innerHTML)
					}
				}

6.//返回#city的所有子节点

var btn05 = document.getElementById("btn05")
				btn05.onclick = function(){
					//返回#city的所有子节点
					var city = document.getElementById("city")
					console.log(city)
					// 返回 #city元素下所有的子节点
					var list = city.childNodes
					console.log(list)
					// 返回#city元素下所有的子元素
					var list1 = city.children
					console.log(list1)
				}
				

7.返回#phone的第一个子节点

var btn06 = document.getElementById("btn06")
				btn06.onclick = function(){
					var phone = document.getElementById("phone")
					console.log(phone)
					// 返回 #phone元素下所有的子节点
					var list = phone.childNodes
					console.log(list)
					// 返回#city元素下所有的子元素
					// var list1 = phone.children
					// console.log(list1)
				}

DOM查询

  1. 获取ul下所有的子元素
var children1 = ul.children
console.log(children1)

2.获取ul下所有的子节点

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

3.获取ul的父节点

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

4.获取ul的父元素

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

5.获取ul的第一个子节点

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

6.获取ul的第一个子元素

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

7.获取ul的上一个兄弟节点

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

8.获取ul的下一个兄弟节点

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

9.获取ul的上一个兄弟元素

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

10.获取ul的下一个兄弟元素

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

DOM的增删查

  1. 创建一个元素
var p = document.createElement("p")
console.log(p)		

2.创建一个新的文本节点

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

3.给p标签添加一个节点

p.appendChild(text)	

4.将p添加到li之前

ul.insertBefore(p,li)

5.将li元素删除

ul.removeChild(li)

6.替换

ul.replaceChild(p,li2)

读取元素的样式

  1. 获取当前元素样式
console.log(div.currentStyle.width)
div.style.width="300px"
alert(div.style.backgroundColor)

2.参数:
1.要获取样式的元素
2.可以传递一个伪元素,一般传null

var obj = window.getComputedStyle(div,null)
				console.log(obj.width)
				console.log(obj.backgroundColor)

3.通过该方法读取到样式都是只读的不能修改

obj.width = "500px"
				var g = getStyle(div,"width")
				console.log(g)
			}
  1. 定义一个函数:获取指定的元素信息
    参数1: 指定获取元素信息的元素
    参数2: 获取元素的样式名
 function getStyle(element,name){
				 if(window.getComputedStyle){
					 return window.getComputedStyle(element,null)[name]
				 }else{
					 return element.currentStyle.name
				 }
			 }

其他样式操作属性

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

  1. 获取元素的宽度与高度,包含内容,边框,内边距
var height = dv1.offsetHeight
					// var width = dv1.offsetWidth
					// console.log(height,width)
					
					// var parent = dv1.offsetParent
					// console.log(parent)
					
					// var parent = dv2.offsetParent
					// console.log(parent)
					// console.log(parent.id)
					
					// // 获取当前元素的水平偏移量
					// var left = dv1.offsetLeft
					// // 获取当前元素的垂直偏移量
					// var top = dv1.offsetTop
					// console.log(left,top)
					

3.获取的是当前元素的滚动区域 的宽度与高度

// var height = dv2.scrollHeight
					// var width = dv2.scrollWidth
					// console.log(width,height)
					
					var left = dv1.scrollLeft
					var top = dv1.scrollTop
					console.log(top,left)
					
				}
				
				var left = dv1.scrollLeft
				var top = dv1.scrollTop
				console.log(top,left)
			}
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页