BOM和DOM知识点总结

最新推荐文章于 2022-11-11 21:43:16 发布

边城乌苏

最新推荐文章于 2022-11-11 21:43:16 发布

阅读量435

点赞数 1

分类专栏： JavaScript # BOM and DOM

本文链接：https://blog.csdn.net/qq_44687727/article/details/102903679

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

BOM and DOM

2 篇文章 0 订阅

订阅专栏

BOM

BOM: Browser Objiect Model，浏览器对象模型

window:浏览器中的顶级对象

一、window.navigator

1.
var userAgent = window.navigator.userAgent //浏览器版本及型号
2.
var appName =window.navigator.appName //网景公司

二、编程式导航

通过JS让页面跳转

var add =window.location.href
例:
btn.onclick =function(){
    window.location.href="http://www.sina.com"
}

三、获取页面历史记录

var history =window.history 
history.back //返回
history.forward //前进
history.go

四、window.onload

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

五、浏览器可视区(包含滚动条)

window.innerWidth //浏览器可视区宽度
window.innerHeight //浏览器可视区高度

六、页面滚动事件

window.onscroll =function(){
    console.log("滚动了浏览器")
}

七、获取非行间样式 : getComputedStyle

window.getComputedStyle(要获取的元素).要获取的样式属性

例：
var dv = document.getElementsByTagName("div")[0]
var width =window.getComputedStyle(dv).width
console.log(width)
//IE9以上和其他浏览器支持

currentStyle 谷歌不支持

var dv = document.getElementsByTagName("div")[0]
var width =dv.currentStyle.width
console.log(width)

要做到自动识别用户浏览器以获取非行间样式

var dv = document.getElementsByTagName("div")[0]
if(window.getComputedStyle){
    var width =window.getComputedStyle(dv).width
}else{
    var width =dv.currentStyle.width
}

八、获取元素实际宽高内容+padding+border

var dv = document.getElementsByTagName("div")[0]
var width =dv.offsetWidth
console.log(width)
var height =dv.offsetHeight
console.log(height)

九、获取元素的偏移量

var dv = document.getElementsByTagName("div")[0]
var left =dv.offsetLeft

十、插入元素的方法 createElement( )、insertBefore( )

<div>
    <p class="pp">我是一个 P 标签</p>
</div>
    <script>
        var span = document.createElement("span")//创建一个span元素
        span.innerHTML = "新来的"
        var p = document.querySelector("p")
        var dv = document.querySelector("div")
        dv.insertBefore(span,p) //div中插入span且在p之前插入 
    </script>

DOM

DOM:Document Object Model 文档对象模型

一、页面卷曲出去的高度

1.有doctype
document.documentElement.scrollTop
2.无doctype
document.body.scrollTop
//要获取兼容所有浏览器的卷曲高度：
var top =document.documentElement.scrollTop || document.body.scrollTop

二、DOM获取元素：

1.ID获取法
//ID具有唯一性，重复后通过id名获取元素只能拿到一个，后面的拿不到。
var box =document.getElementById("box")

2.通过标签名获取元素
// 获取到的是一个伪数组，数组和伪数组都有 length 属性，也都可以通过下标获取，但是伪数组不能使用数组的方法
var div =document.getElementsByTagName("div")

3.通过类名class名获取
//获取到的也是一个伪数组，且是第一个满足条件的元素
var sp =document.getElementsByClassName("sp")

4.通过CSS选择器获取：
//获取的是一个元素，且是第一个满足条件的元素
var ss =document.querySelector("div>span") //div下边的span

5.通过CSS所有选择器获取：
//获取的是所有满足条件的元素(伪数组)，只有通过querySelectAll方法获取的 **伪数组** 能够使用forEach这个方法(可且仅可)
var sp = document.querySelectorAll("ul>li")

三、innerHTML 和 innerText

innerText 获取的只是元素里面的的文本内容   
赋值是会把里面所有的内容全部替换成 ...
innerHTML 获取到的是 一个元素内部所有的标签 都是以字符串的形式返回   也是完全替换
如果 innerHTML 赋值 会把字符串里面的标签进行解析  
如果 innerText 赋值 会把字符串里面所有内容原封不动 直接当成文本内容放进元素里面

四、获取属性

1.获取属性
getAttribute("") 
2.设置自定义属性
setAttribute("参数1"，参数2) 
			//参数1：设置的属性名 ，参数2：属性值
document.querySelctor("div").setAttribute("index",2)
3.移除属性
removeAttribute()
document.querySelector("div").remove("index")

五、定时器:

返回值为这个定时器是这个页面的第几个定时器

1. 间隔定时器

setInterval( code,time) //逗号前是执行的代码，逗号后是间隔时间(毫秒)

var time =setInterval(function(){
    console.log("男神")
},1000 //1000毫秒执行一次)
clearInterval(time) //停止定时器

2.倒计时定时器（炸弹定时器）

只执行一次

setTimeout(code,time)

停止定时器

clearInterval(),clearTimeout
//两种方法可以混用，但一般不会去停止setTimeout,因为它执行一次就没了

六、获取特殊元素的特殊方式：

获取页面的title

var tit =document.title  //   拿到的 title 标签里面的内容获取页面的body

获取页面的head
```
var head =document.head
```
获取页面的body
```
var bod =document.body
```
获取页面的HTML标签
```
var html =document.documentElement
```

通过name属性获取元素表单元素

var uname = document.getElementsByName("uername")

七、元素节点

获取页面上的节点

var dv = document.querySelector("div")
        var p = document.querySelector("p")
        var p2 = document.querySelectorAll("p")[1]
        
         1、获取这个 div 所有的 子节点  //childNodes
         var child = dv.childNodes
         console.log(child)

         2、获取这个 div 所有的 **子元素节点**   //children
         var child = dv.children
         console.log(child)

         3、获取 第一个 ** 子节点 **   //firstChild
         var first = dv.firstChild
         console.log(first)

         4、获取 最后一个 **子节点**  //lastChild
         var last = dv.lastChild
         console.log(last)

         5、获取第一个 ** 子元素节点 **    //firstElementChild
         var firstEle = dv.firstElementChild
         console.log(firstEle);

         6、获取 最后一个 ** 子元素节点  **  // lastElementChild
         var  lastEle = dv.lastElementChild
         console.log(lastEle)


         7、获取 上一个 **兄弟节点**        //previousSibling
         var  prev = p2.previousSibling
         console.log(prev)

         8、获取 下一个 **兄弟节点**      //nextSibling
         var next = p.nextSibling
         console.log(next)


         9、获取上一个  **兄弟元素节点**      //previousElementSibling
         var prev = p2.previousElementSibling
         console.log(prev)


        10、获取下一个 **兄弟元素节点**      //nextElementSibling
         var next = p.nextElementSibling
         console.log(next);

         11、获取   **父节点**   //parentNode
         var parent = p.parentNode
         console.log(parent);


         12、属性节点
         var attrs = p.attributes
         console.log(attrs[0])

节点的属性

节点的类型：nodeType，用数字表示是哪一个节点

 console.log(text.nodeType)       //  文本节点的 节点类型  === 3
 console.log(ele.nodeType)        //  元素节点的 节点类型  === 1
 console.log(attrs.nodeType)      //  属性节点的 节点类型  === 2
 console.log(com.nodeType)        //  注释节点的 节点类型  === 8

节点的名称：nodeName

   console.log(text.nodeName)          // 文本节点都是 #text 表示
   console.log(ele.nodeName)           // 元素节点都是 大写的标签名称
   console.log(attrs.nodeName)         // 属性节点都是  属性名
   console.log(com.nodeName)           // 注释节点都是  #comment 表示

3.节点的值：nodeValue

        console.log(text.nodeValue)          // 文本节点就是里面的文字
        console.log(ele.nodeValue)           // 元素节点  没有  nodeValue  都是 null 
        console.log(attrs.nodeValue)         // 属性节点都是  属性值
        console.log(com.nodeValue)            // 注释节点  注释里面的文字内容

八、获取页面的宽高

1.获取不包含滚动条的宽高

var width =  document.documentElement.clientWidth
var height = document.documentElement.clientHeight

2.body的宽高

var width =document.body.clientWidth
var height =document.body.clientHeight

九、

window.open( ) 打开新页面

btn.onclick =function(){
    window.open("http://www.sina.com")
}

window.close( ) 关闭当前页面

btn.onclick =function(){
    window.close()
}

window.onresize 窗口改变事件

window.onresize =function(){
    console.log("窗口改变了")
}

边城乌苏

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
BOM和DOM知识点总结

BOMBOM: Browser Objiect Model，浏览器对象模型window:浏览器中的顶级对象一、window.navigator1.var userAgent = window.navigator.userAgent //浏览器版本及型号2.var appName =window.navigator.appName //网景公司二、编程式导航通过JS让页面跳转v...
复制链接

扫一扫