【重学JS】-11，DOM和BOM对象

__proto__undefined
141 阅读6分钟

这是我参与2022首次更文挑战的第7天，活动详情查看：链接

一，DOM对象

1，dom介绍

dom 全称Document Object Model 文档对象模型

在JavaScript中，通过Dom来对Html文档进行操作，只要理解dom就可以操作web页面

-文档

文档表示的救是整个html网页文档

-对象

对象将网页中的每一个部分都转换为了一个对象

-模型

使用模型来表示对象之间的关系，这样方便我们获取对象

  • 节点node：是构成我们网页的最基本组成部分，网页中的每一个部分都可以称为是一个节点

比如html标签，属性，文本，注释，整个文档都是一个节点，虽然都是节点，但是实际上他们的具体类型不同。

比如：标签我们称为元素节点，属性我们称为属性节点，文本为文本节点，文档我们称为文档节点

节点的类型不，属性和方法也不尽相同

浏览器为我们提供了 文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页

<button id="btn">我是按钮</button>
<script>
	console.log(document)   //HTMLDocument
	//获取button对象
	var btn = document.getElementById('btn')
  console.log(btn)
	//修改btn文字
	btn.innerHTML('我被改变了')
</script>

2，dom事件

事件是文档或者浏览器窗口中发生的一些特定的交互瞬间,用户和浏览器之间的交互行为

JavaScript与Html之间的交互就是通过事件实现的

对于web程序来说，有下面这些代表性的事件：点击某个元素，将鼠标移动至某个元素上，按下键盘某个按键等

我们可以在事件对应的属性中设置一些js代码，当事件被触发，这些代码将被执行

<button id="btn">我是按钮</button>
<script>
//可以为按钮的对应事件绑定处理函数的形式来响应时间
//当事件被触发时，其对应函数将会被调用
var btn = document.getElementById('btn')
btn.onclick = function(){
	alert('点击了按钮')
}
</script>

3，文档的加载顺序

浏览器在加载一个页面时，也是按照自上向下的顺序加载的，读取到一行运行一行，如果将script标签写到页面上边，

在执行代码时，页面没有加载，获取节点会失败，

在代码执行的时候，页面没有加载，页面没有加载dom对象也没有加载，会导致我们无法获取到dom对象

# 错误示例
<script>
var btn = document.getElementById('btn')
//此时 btn = null
btn.onclick = function(){
	alert('点击了按钮')
}
</script>

<button id="btn">我是按钮</button>

如果希望script在上边，需要使用加载完成函数 onload(),

该事件对应的响应函数将会在页面加载完成后运行，这样就可以确保代码执行的时候，dom对象已经加载完毕

# 为window绑定onload函数
<script>
window.onload = function(){
  var btn = document.getElementById('btn')
	btn.onclick = function(){
		alert('点击了按钮')
	}
}

</script>

<button id="btn">我是按钮</button>

4，dom查询

通过document对象调用，获取元素节点

  1. getElementById() -通过id属性获取一个元素节点对象
  2. getElementsByTagName() -通过标签名获取一组元素节点对象
  1. getElementsByName() -通过name属性获取一组元素节点对象
  2. getElementsByClassName -通过类名class查询一组元素对象，不支持ie8及以下,可以使用querySelector代替
  1. childNodes -表示当前节点的所有子节点
  2. firstChild - 表示当前节点第一个子节点
  1. lastChild -表示当前节点的最后一个子节点
  2. parentNode -表示当前节点的父节点
  1. previousSibling- 表示当前节点的前一个兄弟节点
  2. nextSibling -表示当前节点的下一个兄弟节点
//1 查找#bj的节点
var btn1 = document.getElementById('btn1')
btn1.onclick = function(){
	//查找#bj节点
  var bj = document.getElementById('bj')
  console.log(bj.innerHTML())
}

//查找所有li节点
var btn2 = document.getElementById('btn2')
btn2.onclick = function(){
	//查找所有li节点
  该方法会返回一个类数组对象，所有查询到的元素都会封装到对象中
  var lis = document.getElementByTagName('li')
  console.log(lis.length)
}

//获取name = gender 的所有节点
var btn3 = document.getElementById('btn3')
btn3.onclick = function(){
  var inputs = document.getElementByName('gender')
	for(var i= 0;i<inputs.length;i++){
    //读取元素节点属性：元素.属性名 ,除class外！获取class属性 需要使用.className
  	alert(inputs[i].value)
  }
}

//获取父节点下所有子节点

var btn4 = document.getElementById('btn4')
btn4.onclick = function(){
	var city =  document.getElementById('city')
  //查找节点下所有子节点
  var lists =  city.getElementsByTagName('li')
  //childNodes
  //childNodes属性会获取包括文本节点在内的所有节点
  //根据dom标签间空白也会当成文本节点，ie8及以下不会将空白文本当节点
  var cns = city.childNodes
  
  //children属性 可以获取当前元素所有子元素
  var cns2 = city.children
}

//返回元素第一个节点
var btn5 = document.getElementById('btn5')
btn5.onclick = function(){
	var phone =  document.getElementById('phone')
  phone.childNodes[0];
  //或者 firstChild 可以获取到当前元素的第一个子节点，包括空白文本节点
  var fir  = phone.firstChild
  //firstElementChild 获取当前元素的第一个子元素，不支持ie8及以下 
  var fir  = phone.firstElementChild
}

//返回元素最后一个节点
var btn6 = document.getElementById('btn6')
btn6.onclick = function(){
	var phone =  document.getElementById('phone')
  phone.childNodes[phone.childNodes.length];
  //或者 lastChild  可以获取到当前元素的最后一个子节点，包括空白文本节点
  var las  = phone.lastChild 
  //lastElementChild 获取当前元素的第一个子元素，不支持ie8及以下 
  var fir  = phone.firstElementChild
}

//
//定义函数 为指定元素绑定单击响应事件
//参数1：idStr 需要i绑定单击事件对象的id属性值
//fun  事件的回调函数，当单击元素时，该函数会触发
function handleClick(idStr,function){
	var btn = document.getElementById(idStr)
  btn.onclick = fun
}

handleClick('btn7',function(){
	//获取id为bj的节点
  	var bj =  document.getElementById('bj')
  //返回#bj的父节点
   var pn = bj.parentNode
   console.log(pn)
})

#innerText 该属性可以获取到元素内部的文本内容，他和innerHTML类似，不同的是他会将html标签去除。

//为btn8绑定单击函数
handleClick('btn8',function(){
	//获取id为android的节点
  	var android =  document.getElementById('android')
  //返回#android的前一个节点 （也可能获取到空白文本）
   var ps = android.previousSibling
   // 获取前一个元素节点 previousElementSibling ie8及以下兼容
   var pe = android.previousElementSibling
   console.log(ps)
})

//为btn9绑定单击函数
handleClick('btn9',function(){
	//获取id为username的节点
  	var username =  document.getElementById('username')
	//读取uname的value
   alert(username.value) 
 })

//为btn10绑定单击函数
handleClick('btn10',function(){
	//获取id为username的节点
  	var um =  document.getElementById('username')
	//设置uname的value
   um.value = '你好！'
 })

//为btn11绑定单击函数
handleClick('btn10',function(){
	//获取id为bj的节点
  	var bj =  document.getElementById('bj')
	alert(bj.innerHTML)
  bj.firstChild.nodeValue // 
 })
  1. querySelector()

需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象，

使用该方法总会返回唯一的元素，如果满足条件的条件有多个，他只会返回第一个

<div class="box1">
	<div>111</div>  
</div>

var div = document.querySelector('.box1 div')
console.log(div)
  1. querySelectorAll()

该方法和querySelector用法类型，不同的是，他会把符合条件的元素封装到一个数组中返回

即使满足的条件只有一个，他也会以数组形式返回

二，BOM

1,BOM介绍

bom可以使我们通过js来操作浏览器，在bom中为我们提供了一组对象，用来完成对浏览器的操作

-BOM对象一共分为一下几种

  • Window -代表的是整个浏览器窗口，同时window也是网页中的全局对象
  • Navigator -代表当前浏览器的信息，通过该对象可以来识别不同的浏览器
  • Location -代表当前浏览器的地址信息 通过Location 可以获取浏地址栏信息，或者操作浏览器跳转页面
  • History - 代表浏览器历史记录，可以通过该对象来操作浏览器的历史记录（由于隐私原因，该对象不能获取到具体历史记录），只能操作浏览器向前或者翻页

而且该操作只在当次访问时有效

  • Screen -代表用户的屏幕信息，通过该对象可以获取到用户的显示器相关的信息

这些BOM对象在浏览器中都是作为window对象的属性保存

可以通过window对象来使用，也可以直接使用

2，Navigator

由于历史原因，navigator对象中的大部分属性都已经不能帮我们识别浏览器了。

一般我们只会使用userAgent来判断浏览器信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容。

不同的浏览器有不同的userAgent

console.log(navigator.userAgent)
//谷歌 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

var ua =navigator.userAgent
if(/firefox/i.test(ua)){ 
  //火狐
}else if(/Chrome/i.test(ua)){
	//谷歌
}

在ie11中已经将微软和ie相关的标识去除了，我们基本已经不能通过userAgent来识别一个浏览器是否是ie

如果通过userAgent不能判断，我们可以通过一些浏览器的特有的对象进行判断

比如：ActiveXObject

console.log(window.ActiveXObject) //只有ie浏览器才会存在

alert('ActiveXObject' in window)

3,History

history.length属性，可以获取到当前访问的链接数量。

**history.back() -**可以用来回退到上一个页面，作用和浏览器的回退按钮一样

history.forward() -可以跳转下一个页面，作用和浏览器的前进按钮一样

history.go() 可以用来跳转指定页面，需要一个整数作为参数，1：表示向前跳转一个页面 2表示向前跳转2个页面 ,-1表示向后跳转一个页面

4, Location

如果直接打印location，则可以获取到地址栏的信息（当前页面完整的路径）

如果直接将location属性修改为一个完整路径，或相对路径，则我们页面将会自动跳转到该路径，并且会生成相应的历史记录

#location.assign() //用来跳转到其他页面，作用和直接修改location一样
#location.reload() //重新加载当前页面，作用和浏览器的刷新按钮一样，如果在方法中传递true作为参数，则会强制清空缓存，刷新页面
#location.replace() //可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，不会生成历史记录，不能使用回退按钮回退

#location.href 跳转页面
avatar
文章
阅读
粉丝