08-javascript - BOM / DOM

最新推荐文章于 2024-11-19 10:14:06 发布

灬violet灬

最新推荐文章于 2024-11-19 10:14:06 发布

阅读量179

点赞数

分类专栏： javaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_53841588/article/details/120913228

版权

javaScript 专栏收录该内容

14 篇文章

订阅专栏

BOM

js组成 => ESCMAScript + BOM + DOM

BOM => browser Object model 浏览器对象模型
BOM 里面有一个顶级对象 window

常见操作BOM的方法

navigator 用户信息

用户基本信息 userAgent

var userAgent = window.navigator.userAgent
console.log(userAgent)//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36

操作系统 platform

var platform = window.navigator.platform
console.log(platform)  //Win64

浏览器名称 appName

var appName = window.navigator.appName
console.log(appName) // Netscape  网景公司

版本号 appVersion

var appVersion = window.navigator.appVersion
console.log(appVersion) //5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36

location 地址栏信息

获取地址栏信息

window.location.href

页面刷新

function Reload(){
	window.location.reload()	
}

设置地址栏信息

function Href(){
    window.location.href = "http://www.baidu.com"
}

history 历史记录

window.history
window.history.back( )
window.history.forward( )
打开网页 window.open(“地址”)
关闭网页 window.close( )
窗口改变事件： window.onresize
获取浏览窗口的宽和高
- window.innerWidth 宽
- window.innerHeight 高
浏览器事件
- onload

window.onload = function(){
    //页面资源加载完毕执行
}

onscroll

window.onscroll= function(){
    console.log("gunle")  
    //滑动滚轮会执行
}

获取页面卷曲出去的距离

document.documentElementt.scrollTop

document.documentElement.scrollLeft
/* 兼容*/

document.body.scrollTop    document.body.scrollLeft

chrome  有DOCTYPE
		document.documentElement.scrollTop 
    	 document.documentElement.scrollLeft
        没有 doctype 
        document.body.scrollTop
        document.body.scrollLeft
<IE6   有没有 doctype 
        document.body.scrollTop
        document.body.scrollLeft

定时器 (异步代码)
间隔定时器 setInterval( ) 每隔一段时间执行
倒计时定时器 setTimeout( ) 只执行一次
注：定时器里面的this指向window

var res1 = setInterval(function(){
    console.log("我是间隔定时器" + res1) //我是间隔定时器1
},1000)
var res1 = setTimeout(function(){
    console.log("我是倒计时定时器" + res1)//我是倒计时定时器2
},1000)

//注：这两个定时器的返回值都是数字，代表这个定时器是我页面的第几个定时器，

清除定时器
- clearInterval( res1 )
- clearTimeout( res2 )

注：这两种方法可以清楚任何一种定时器

DOM

DOM => document Object model 文档对象模型（提供了一系列操作页面上元素的方法）
DOM 里面有一个顶级对象 document
DOM获取元素的方法

1、通过id获取元素 document.getElementById()
2、通过 class 类名获取元素 document.getElementsByClassName() 结果为一个伪数组，有数祖下标和长度，但是不能使用数组的方法
3、通过标签名获取元素 document.getElementsByTagName()
4、通过 css 选择器获取元素 document.querySelector("css 选择器") 如果这个 css 选择器有多个元素，只会选择第一个
- 要选择一个 li 并且类名为 red 交集选择器

var Lis = document.querySelector("li.red")--
console.log(Lis)

document.querySelectorAll("css 选择器")

var lis = document.querySelectorAll("li")
 	console.log(lis)
 	lis.forEach(function(item){
     	console.log(item)
 })
//可以使用forEach( )方法
 lis.forEach(function(iterm){
     console.log(iterm)
 })

操作元素的一些属性

1、通过标签名获取元素

var li = document.getElementsByTagName("li")[1]

2、操作元素的属性

 innerText  不会解析标签，会把所有的东西当做文本加到标签里面
 innerHTML  会解析标签

3、id

console.log(li.id) //  输出id名
li.id = "box" // 修改id

4、操作元素的 class 名，class名在js中是一个关键字，所以不能直接使用使用className

console.log( li.className) //  输出class名
li.className = "yellow" // 修改类名
li.className += " yellow" //  在类名基础上添加

5、style 只能获取和设置行内样式

console.log(ul.style.color) //   获取ul的颜色
ul.style.color = "yellow //  修改ul的颜色

6、getAttribute 和 setAttribute 获取/设置元素自定义属性

getAttribute("要获取的属性名")
var index = li.getAttribute("index")
console.log(index)  //获取li里面 index 的值

setAttribute("要设置的属性名", "要设置的属性值")
li.setAttribute("index","213")

removeAttribute(“要移除的属性名”) 移出自定义属性

获取特殊元素的方式

1、获取 html 标签 var html = document.documentElement
2、获取 body var body = document.body
3、获取 head 标签 var head = document.head
4、获取 title 获取的不是标签，而是里面的内a容
- var title = document.title
5、表单元素获取元素的方法通过name属性获取元素
- var user = document.getElementsByName("username")

获取节点的方法

1、子节点 childNodes
2、子元素节点 children
3、第一个子节点 firstChild
4、最后一个子节点 lastChild
5、第一个子元素节点 firstElementChild
6、最后一个子元素节点 lastElementChild
7、前一个兄弟节点 previousSibling
8、下一个兄弟节点 nextSibling
9、前一个兄弟元素节点 previousElementSibling
10、下一个兄弟元素节点 nextElementSibling
11、获取父元素 parentNode

节点属性获取节点

<div class = "dv" index = " 0">第一个文本节点
	<p>
  		 第一个p
	</p>
<!-- 注释节点-->
 </div>
	 // 获取节点 
     var dv = document.querySelector('div')
     // 1、获取属性节点 
     var attr = dv.attributes[0]
     // console.log(attr[0])
     // 2、获取文本节点
     var txt = dv.firstChild
     // console.log(txt)
     // 3、获取元素节点
     var p = dv.childNodes[1]
     // console.log(p)
     // 4、获取注释节点
     var comment = dv.lastChild.previousSibling
     // console.log(comment)

节点的属性
- 元素节点 nodeType => 1 节点名称nodeName：节点名称
- 属性节点 nodeType => 2 属性名
- 文本节点 nodeType => 3 #text
- 注释节点 nodeType => 8 #comment
节点内容 nodeValue
- 元素节点没有
- 属性节点属性值
- 文本节点文本内容
- 注释节点注释内容

操作元素的方法

1、创建一个元素 createElement(你要创建元素的标签名)
2、追加到一个元素里面去 appendChild(你要追加的元素)
3、替换一个元素 replaceChild(用哪个元素替换，要被替换的元素)
4、移出某一个元素 removeChild(要移出的元素)
5、在一个元素之前插入另一个元素 insertBefore(要插入的那个元素，在哪一个元素之前插入)
6、克隆一个元素 cloneNode(布尔值) 默认false 参数写true 是把这个元素里面所有的子元素克隆下来

注：除了1以外都是在父元素上加

获取元素的非行内样式

1、window.getComputedStyle(你要获取的样式的那一个元素).要获取的属性 谷歌 IE9及以上支持
2、currentStyle.backgroundColor IE8及以下支持

获取窗口的宽高

包含滚动条： window.innerWidth window.innerHeight
不包含滚动条：document.documentElement.clientWidth document.documentElement.clientHeight
获取body元素的高度：document.body.clientWidth document.body.clientHeight
clientWidth 元素的width +左右padding
clientHeight 元素的height + 上下padding
clientLeft 元素的左边框
clientTop 元素的上边框

宽高设置三大系列

client
- clientX clientY
- clientWidth clientHeight padding + content
- clientLeft clientTop 左边框和上边框
offset
- offsetX offsetY
- offsetWidth offsetHeight (元素 content + padding + border)
- offsetLeft offsetTop 元素距离有定位的父元素左边和上边的距离，如果父元素都没有定位，就是相当于body左边和上边的距离
- offsetParent 获取元素有定位的父元素，如果父元素都没有定位，就获取 body
page
- pageX pageY