JavaScript BOM与DOM操作详解-CSDN博客

本文链接：https://blog.csdn.net/m0_49788155/article/details/121214251

28 BOM DOM

一、BOM location地址栏对象

- hostname
	设置或返回当前URL的主机名

- href
	获取地址栏中完整的地址，可以实现JS的网页跳转
    
- pathname
	文件路径及文件名
    
- protocol
	协议，如https://、ftp://

- hash
	锚点名称
    
- reload()
	刷新网页
    
- reload([true])
	强制刷新页面，会让数据重新加载
    
- search()
	获取查询字符串
    
<meta http-equiv = "refresh" content = "5;url = http://www.baidu.con">
    网页打开5s后会自动跳转到http://badidu.com

二、BOM navigator对象

基本没怎么使用了

- appName	appCodeName
	浏览器软件名称（现在没有多大参考意义）
    
- appVersion
	浏览器软件的核心版本号
    
- platform
	平台

- userAgent
	浏览器版本信息

三、BOM history对象

- back()		后退

- forward()		前进

- go()			可以控制后退和前进

history.back() === history.go(-1)
history.forward() === history.go(1)

四、BOM screen屏幕对象

- width		返回屏幕的宽度，只读属性

- height	返回屏幕的高度，只读属性

- availWidth	屏幕的有效宽度，不含任务栏，只读属性

- availHeight	屏幕的有效高度，不含任务栏，只读属性

五、BOM window对象事件

- window.onload
	当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件(条件)

- onscroll	滚动事件
    
    scrollTop	垂直滚动条的距离
    scrollLeft 	水平滚动条的距离
    
    window.innerHeight	浏览器窗口的可见高度
    window.innerWith	浏览器窗口的可见宽度
    
    获取元素的兼容写法
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    
- window.onresize	
    事件会在窗口或框架被调整大小时发生

六、使用BOM模拟粘性定位

设置布局

<header></header>
<nav></nav>
<main></main>

设置一些简单样式

*{
	padding: 0;
	margin: 0;
}
header{
	width: 100%;
	height: 50px;
	background: pink;
}
nav{
	width: 100%;
	height: 100px;
	background: skyblue;
}
main{
	width: 100%;
	height: 1200px;
	background: hotpink;
}

设置JS

onscroll = function(){
	var nav = document.getElementsByTagName("nav")[0]
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
	if(scrollTop >50){
		nav.style.position = "fixed"
		nav.style.top = 0
	}
	else{
		nav.style.position = ""
	}
}

七、DOM

DOM Document Object Model 文档对象模型，可以把网页中所有的东西看作是对象

DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现

DOM的官方定义，DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构

八、DOM的分类

核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法

HTML DOM：针对HTML文档提供的专用的属性方法

XML DOM：针对XML文档提供的专用的属性和方法。

CSS DOM：提供了操作CSS的属性和方法

Event DOM：事件对象模型。如：onclick、 onload等

九、DOM 核心DOM操作

元素节点类型

- document	文档节点，代表整个网页，不代表任何HTML标记。
	但它是html节点的父节点

- element	元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”
	它可以有文本节点和属性节点

- attribute	属性节点。指HTML标记的属性

- text	是节点树的最底节点

- comment	注释节点

访问节点

- firstChild	第1个子节点

- lastChild		最后一个子节点

- childNodes	子节点列表，是一个数组

- parentNode	父节点

- nodeName		节点名称，返回标签

- nodeValue		属性节点的属性值

- nodeType		节点类型，返回值是数字
	如果节点是元素节点，则nodeType属性返回1
	如果节点是属性节点，则nodeType属性返回2
	如果节点是文本节点，则nodeType属性返回3
	如果节点是注释节点，则nodeType属性返回8
    
- document.documnetElemnet	查找<html>标记的方法

- document.body		查找<body>标记的方法

属性的操作

- setAttribute(name, value)	给某个节点添加一个属性

- getAttribute(name)	获取某个节点属性的值

- removeAttribute(name)		删除某个节点的属性

创建节点

- document.createElement(tagName)
	创建一个指定的HTML标记，一个节点
	tagName	是指不带<>的HTML标记名称

- parentNode.appendChild(childNode)
	将创建的节点，追加到某个父节点下
    parentNode代表父节点，父节点必须存在
    childNode代表子节点
    
- box.insertBefore()
	可在已有的子节点前插入一个新的子节点先放在排在前面的元素，再写其他元素
    参数1	表示新建的节点
    参数2	表示要插入的那个节点之前

删除节点

- parentNode.removeChild(childNode)
	删除某个父节点的子节点
    parentNode	代表父节点
    childNode	代表要删除的子节点

十、HTNL DOM的操作

- getElementById()
	查找网页中指定id的元素对象
    
- getElementsByTagName(tagName)
	查找指定的HTML标记，返回一个数组
    
- getElementsByName("Name")
	通过name值获取元素，返回值是数组，通常用来获取有name的input的值

- getElementsByClassName() 
	通过class名获取元素，返回值是数组

- document.querySelectorAll()
	ES5新增选择器
    
- document.querySelector()
	返回单个元素

十一、元素属性的对象

在HTML中加“标记”

在DOM中叫“节点”

在JS中叫“对象”

- tagName	标签名称

- className	CSS类的样式

- id	同HTML标记的id属性一样

- title	同HTML标记的title属性一样

- style	同HTML标记的style属性一样

- innerHTML	包含HTML标记中的所有的内容，包括HTML标记等