JavaScript|JavaScript: BOM对象和 DOM 对象的增删改查 dom|javascript|BOM|web|js

操作BOM 对象
浏览器对象模型:

window

window 代表浏览器窗口。

window.alert() undefined window.innerHeight 837

Navigator

封装了浏览器的信息.

navigator.appName "Netscape" navigator.appVersion "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36" navigator.platform "Win32"

【JavaScript|JavaScript: BOM对象和 DOM 对象的增删改查】大多数时候,我们不会使用 navigator 对象,因为会被人为修改！

screen

屏幕的尺寸。

screen.width 1536 screen.height 864

location ?

location 代表当前页面的 URL 信息。
比如我们访问百度: 在控制台输入 location.

host: "www.baidu.com"// 主机 href: "https://www.baidu.com/" // 当前页面地址 protocol: "https:"// 协议 reload: ? reload()// 重新加载,刷新网页// 设置新的地址,进行跳转 location.assign('https://blog.csdn.net/qq_43619271')

document

当前页面信息，HTML,DOM文档。

document.title "小潘同学的博客_DaulFrank_CSDN博客-Java,Mysql,JavaWeb领域博主" document.title="小蓝" "小蓝"

获取具体的文档树节点:

JavaSE JavaEE JavaWeb > let elementById = document.getElementById('app'); console.log(elementById);

获取Cookie:

document.cookie

history

history.back()// 后退 history.forword // 前进

操作DOM对象:
DOM: 文档对象模型.

核心:

浏览器网页就是一个 DOM 树形结构,层层嵌套。

更新: 更新 DOM 节点。
遍历: 遍历DOM 节点,得到 DOM 节点。
删除: 删除一个 DOM 节点。
添加: 添加一个 DOM 节点。

DOM节点: 就是我们源代码中的标签,body,div,a,p…
要操作一个 DOM 节点,就需要先获取这个DOM 节点。
1、获得DOM节点

我是标题 p1 p2 > let h2 = document.getElementsByTagName('h2'); console.log(h2); let p1 = document.getElementById('p1'); console.log(p1); let p2 = document.getElementsByClassName('p2'); console.log(p2); let father = document.getElementById('father'); console.log(father); // 获取父节点下的所有子节点 let children = father.children; console.log(children);

2、更新DOM节点:

>// 先获取 DOM 节点 let div = document.getElementById('id1'); // 进行相应的修改// 向 div 中添加元素 div.innerText='123'; // 可以解析 HTML 文本 div.innerHTML='456'; // 设置 css 样式 div.style.color='red'; div.style.fontSize='200px';

3、删除DOM节点: 删除节点的步骤:
先找到父节点,通过父节点删除该 DOM 节点。

我是标题 p1 p2 >// 先找到该 DOM 节点 let p1 = document.getElementById('p1'); // 进而找到该 DOM 节点的父 DOM 节点 let father = p1.parentElement; // 通过父 DOM 节点删除其 DOM 节点 father.removeChild(p1);

注意:删除多个节点的时候,Children 是在时刻变化的,例如删除第一个子节点的时候,那么第二个节点就移动到了第一个节点的位置.删除多一个节点的时候需要注意。
4、插入节点: 我们获得了某个DOM 节点,假设这个 DOM 节点是空的,我们通过 innerHTML 就可以增加一个元素,如果这个DOM 节点已经存在元素了,就不能这么干了,因为会覆盖原有的内容。

追加

JavaScript JavaSE JavaEE JavaME > let js = document.getElementById('js'); // 已存在节点 let list = document.getElementById('list'); list.appendChild(js);

创建一个新的标签,实现插入

JavaScript JavaSE JavaEE JavaME > // 创建一个新的节点进行插入 let newP = document.createElement('p'); // 给新的节点设置 id newP.id = 'newP'; // 给新的节点中添加内容 let content = newP.innerHTML='Java'; // 根据设置的 id 进行追加 list.appendChild(newP);

insert

JavaScript JavaSE JavaEE JavaME >let ee = document.getElementById('ee'); let me = document.getElementById('me'); let list = document.getElementById('list'); // list: 要包含的节点 (谁在谁前面就把谁放到前面) list.insertBefore(me,ee);