DOM和BOM常用API

青稞儿

已于 2024-01-17 14:18:44 修改

阅读量975

点赞数 19

文章标签： javascript 前端 vue.js

于 2024-01-17 14:11:42 首次发布

本文链接：https://blog.csdn.net/m0_61698324/article/details/135649155

版权

DOM和BOM常用API

DOM 是指文档对象模型；是为了操作文档出现的 API，可以访问HTML文档的所有元素, document 是其的一个对象；
BOM 是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。是为了操作浏览器出现的 API，window 是其的一个对象。

DOM

获取节点

document获取方法	节点指针(node)
document.getElementById(‘元素id’)	parentNode 父节点(亲爸爸) childNodes 元素所有的子节点列表
document.getElementsByName(‘元素name属性’)	firstChild ：返回第一个子节点：元素节点、文本节点或注释节点 firstElementChild: 忽略文本和注释节点 ol[0].children[0]选择第几个孩子
document.getElementsByTagName(‘元素标签’)	nextSibling 下个兄弟节点 previousSibling 上个兄弟节点 nextElementSibling 忽略文本和注释
document.querySelector(‘选择器名’) 返回第一个满足条件的 document.querySelectorAll(‘选择器名’) 返回满足条件的集合	firstElementChild 返回第一个子元素节点 lastElementChild 返回最后一个子元素节点 ie9才支持

例子：

<body>
    <div class="box">
        <div id="myElement">
            <p>这是一个HTML元素</p>
        </div> 
        <div name="hello">
            <p>这是另一个HTML元素</p>
            <div>999</div>
        </div>
        <h1>你好</h1>
        <a href="#">a标签</a>
        <p>段落</p>
    </div>
    
</body>
<script>
// 获取HTML元素
var element = document.getElementById('myElement');
// 输出获取到的元素
console.log('获取到的元素',element);
// 输出父节点
console.log('父节点',element.parentNode);
// 输出子节点列表
console.log('子节点列表',element.childNodes);


// 输出获取到的元素
var hello = document.getElementsByName('hello');
console.log(hello);
console.log('第一个子节点',hello[0].children[0]);
//lastChild lastElementChild与之相反
console.log('第一个子节点',hello[0].firstChild);//firstChild 返回第一个子节点：元素节点、文本节点或注释节点
console.log('第一个子节点',hello[0].firstElementChild); // 忽略文本和注释节点


// 输出获取到的元素
var tagName = document.getElementsByTagName('a');
console.log(tagName);
console.log('下个兄弟节点',tagName[0].nextSibling);
console.log('下个兄弟节点',tagName[0].nextElementSibling); // 返回下一个同胞元素（忽略文本和注释）
console.log('上个兄弟节点',tagName[0].previousSibling);
</script>

节点操作

创建节点	添加插入节点	替换节点	复制节点	删除节点
document.createElement(‘元素标签’);	node.appendChild(child)	replaceChild(‘插入新元素’，‘替换老元素’)	node.cloneNode(true/false)	node.removeChild(child)
document.createAttribute(‘元素属性’);	node.insertBefore(添加的新节点, 指定元素);指定元素前面添加节点		true 复制当前节点及其所有子节点 false 仅复制当前节点	child代表要删除的节点
document.createTextNode(‘文本内容’);	node（父级） child（子级）

1.创建节点
// 创建一个HTML元素
var element = document.createElement('div');
// 添加属性
element.setAttribute('class', 'myClass');

// 创建一个属性对象
var attribute = document.createAttribute('class');
// 为属性对象添加值
attribute.value = 'myClass';

// 创建一个文本节点
var textNode = document.createTextNode('Hello, world!');
element.appendChild(textNode);


2.添加插入节点
// 为元素添加一个子元素
var child = document.createElement('p');
child.textContent = '这是一个子元素。';
element.appendChild(child);
// 输出元素及其子元素
console.log('appendChild',element.outerHTML);

3.替换节点
// 插入一个新的子元素，替换现有的子元素
var newChild = document.createElement('h1');
newChild.textContent = '这是新的子元素。';
element.replaceChild(newChild, child);
// 输出元素及其子元素
console.log('replaceChild',element.outerHTML);

4.替换节点
// 克隆元素
var clonedElement = element.cloneNode(true);
// 输出克隆的元素
console.log('cloneNode',clonedElement.outerHTML);

5.替换节点
// 删除元素
element.removeChild(newChild);
// 输出删除后的元素
console.log('removeChild',element.outerHTML);

属性操作

获取属性	设置属性	删除属性
element.getAttribute(‘元素属性名’)	element.setAttribute(‘属性名’, ‘属性值’);	element.removeAttribute(‘属性名’)
一般是获取元素内置属性的(元素本身自带的，例id,class) 可获取自定义元素的属性属性值	主要针对于自定义属性	删除元素中的指定属性
自定义属性：date-index h5规定凡是以date开作为属性名且赋值头的是自定义属性获得属性值的话还是用getattribute	创建或改变元素节点的属性
console.log(div.getAttribute(‘data-index’));

// 创建一个HTML元素
var element = document.createElement('div');

// 设置元素的属性
element.setAttribute('class', 'myClass');

// 获取元素的属性
var attribute = element.getAttribute('class');
console.log(attribute); // 输出 "myClass"

// 删除元素的属性
element.removeAttribute('class');

事件操作

鼠标事件	键盘事件
onclick - 鼠标左键点击 ondbclick - 鼠标左键两次	onkeyup - 按键被松开 - 不区分字母大小写
onmouseover - 鼠标经过 onmouseout - 鼠标离开	onkeydown - 按键按下 - 能识别所有的键
onmousemove - 鼠标移动 onmouseup - 鼠标弹起 onmousedown - 鼠标按下	onkeypress - 按键按下-区分大小写-不识别功能键，比如ctrl shift 箭头等
contextmenu禁用右键菜单 selectstart禁止选中文字	三个事件的执行顺序：onkeydown --> onkeypressd --> onkeyup

BOM

BOM的核心是Window

navigator对象包含有关浏览器的信息

最常用的是userAgent，该属性可以返回客户机发送服务器的user-agent头部的值。
screen

availHeight	availWwidth	height	width	colorDepth
返回显示屏幕的可用高度	返回显示屏幕的可用宽度	返回显示屏幕的像素高度	返回显示屏幕的像素宽度	返回显示屏幕颜色的位数
(除去任务栏的高度)	(除去任务栏的宽度)

history 与浏览器历史记录进行交互

back()	forward()	go(参数)
后退功能	前进功能	前进后退功能 1，前进一个页面；-1，后退1个页面

location

属性	方法
location.href：获取或设置整个URL	location.assign()：跟href一样，可以跳转页面（也称为重定向页面），可以回退
location.host：返回主机(域名)	location.replace()：替换当前页面，因为不记录历史，不能后退页面
location.port：返回端口号，如果没有，则返回空字符串	location.reload()：重新加载页面，相当于刷新按钮。如果参数为true，强制刷新ctrl+f5 如果页面缓存后，刷新会从本地提取，强制刷新就是从服务器里重新加载
location.pathname：返回路径
location.search：返回参数
location.hash：返回片段。#后面的内容，常见于链接锚点

焦点控制

focus	blur
得到焦点	移出焦点

打开关闭窗口

open	close()
(‘url’,‘窗口名称‘’，’窗口风格’)	- 自动关闭浏览器窗口

定时器

setTimeout	clearTimeout	setInterval	clearInterval
到指定时间执行代码	取消定时器	到指定时间循环执行代码	取消循环定时器
const a = setTimeout(()=>{},5000)	clearTimeout(a)	const b = setInterval(()=>{},5000)	clearInterval(b)