JavaScript: BOM对象 和 DOM 对象的增删改查
操作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"
大多数时候,我们不会使用 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="小蓝"
"小蓝"
获取具体的文档树节点:
<body>
<dl id="app">
<dt>JavaSE</dt>
<dt>JavaEE</dt>
<dt>JavaWeb</dt>
</dl>
<script>
let elementById = document.getElementById('app');
console.log(elementById);
</script>
</body>
获取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节点
<body>
<div id="father">
<h2>我是标题</h2>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
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);
</script>
</body>
2、更新DOM节点:
<body>
<div id="id1">
</div>
<script>
// 先获取 DOM 节点
let div = document.getElementById('id1');
// 进行相应的修改
// 向 div 中添加元素
div.innerText='123';
// 可以解析 HTML 文本
div.innerHTML='456';
// 设置 css 样式
div.style.color='red';
div.style.fontSize='200px';
</script>
</body>
3、删除DOM节点:
删除节点的步骤:
先找到父节点,通过父节点删除该 DOM 节点。
<body>
<div id="father">
<h2>我是标题</h2>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
// 先找到该 DOM 节点
let p1 = document.getElementById('p1');
// 进而找到 该 DOM 节点的 父 DOM 节点
let father = p1.parentElement;
// 通过 父 DOM 节点删除其 DOM 节点
father.removeChild(p1);
</script>
</body>
注意:删除多个节点的时候,Children 是在时刻变化的,例如删除第一个子节点的时候,那么第二个节点就移动到了第一个节点的位置.删除多一个节点的时候需要注意。
4、插入节点:
我们获得了某个DOM 节点,假设这个 DOM 节点是空的,我们通过 innerHTML 就可以增加一个元素,如果这个DOM 节点已经存在元素了,就不能这么干了,因为会覆盖原有的内容。
追加
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let js = document.getElementById('js'); // 已存在节点
let list = document.getElementById('list');
list.appendChild(js);
</script>
</body>
创建一个新的标签,实现插入
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
// 创建一个新的节点进行插入
let newP = document.createElement('p');
// 给新的节点设置 id
newP.id = 'newP';
// 给新的节点中添加内容
let content = newP.innerHTML='Java';
// 根据设置的 id 进行追加
list.appendChild(newP);
</script>
</body>
insert
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let ee = document.getElementById('ee');
let me = document.getElementById('me');
let list = document.getElementById('list');
// list: 要包含的节点 (谁在谁前面就把谁放到前面)
list.insertBefore(me,ee);
</script>
</body>