JavaScript05：BOM和DOM
浏览器对象模型（BOM）
window、navigator、screen、location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<script>
"use strict";
/**
* window对象不但充当全局作用域，而且表示浏览器窗口
* 获取浏览器窗口内外的高度和宽度
*/
console.log(window.innerHeight);
console.log(window.innerWidth);
console.log(window.outerHeight);
console.log(window.outerWidth);
/**
* navigator对象表示浏览器的信息
*/
console.log(navigator.userAgent);
/**
* screen对象表示屏幕的信息
*/
console.log(screen.height);
console.log(screen.width);
/**
* location对象表示当前页面的URL信息
*/
console.log(location.href); // 完整URL
console.log(location.protocol); // https协议
console.log(location.hostname); // 主机名
console.log(location.port); // 端口
console.log(location.pathname); // 文件路径
console.log(location.search); // 查找内容
console.log(location.reload()); // 重新加载
console.log(location.assign("/")); // 重定向新页面
</script>
</head>
<body>
</body>
</html>
文档对象模型（DOM）
document对象表示当前页面
由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点，因此可以根据document对象获取具体的文档树节点
要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围
获取DOM节点
getElementById()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()
script标签要放在HTML文档最后面，因为只有先生成了DOM文档，才能执行DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<dl id="app" class="list">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<div id="test-div">
<div className="c-red">
<p id="test-p">JavaScript</p>
<p>Java</p>
</div>
<div className="c-red c-green">
<p>Python</p>
<p>Ruby</p>
<p>Swift</p>
</div>
<div className="c-green">
<p>Scheme</p>
<p>Haskell</p>
</div>
</div>
</body>
</html>
<script>
"use strict";
/**
* title：网页标题
* getElementById()：根据id获取节点，可以直接定位唯一的一个DOM节点
* getElementsByTagName()：根据标签获取节点，返回一组DOM节点
* getElementsByClassName()：根据class获取节点，返回一组DOM节点
* cookie：缓存（JavaScript可以恶意获取cookie，因此服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取）
* 还可以使用querySelector()和querySelectorAll()方法进行选择器选择
*/
document.title = "哈哈哈";
let i = document.getElementById("app");
let tag = document.getElementsByTagName("dl");
let c = document.getElementsByClassName("list")
let cookie = document.cookie;
/**
* children：获取所有子节点
* firstChild：获取第一个子节点
* lastChild：获取最后一个子节点
*/
console.log(i.children);
console.log(i.firstChild);
console.log(i.lastChild);
/**
* 选择<p>JavaScript</p>
*/
let js1 = document.getElementById("test-p");
let js2 = document.querySelector("#test-p");
console.log(js1.innerText);
console.log(js2.innerText);
/**
* 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>
*/
let arr1 = document.getElementById("test-div").children[1].children;
let arr2 = document.querySelectorAll("#test-div div:nth-of-type(2) p");
console.log(arr1[0].innerText);
console.log(arr2[1].innerText);
/**
* 选择<p>Haskell</p>
*/
let haskell1 = document.getElementById("test-div").children[2].children[1];
let haskell2 = document.querySelector("#test-div div:nth-of-type(3) p:nth-of-type(2)");
console.log(haskell1.innerText);
console.log(haskell2.innerText);
</script>
更新DOM节点
innerText、innerHTML、style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script>
"use strict";
/**
* innerText：获取节点普通文本
* innerHTML：可以解析HTML格式文本
* style：获取CSS属性
*/
let test = document.getElementById("test");
test.innerText = "哈哈哈";
test.innerHTML = "<strong>嘿嘿嘿</strong>";
test.style.color = "red";
test.style.fontFamily = "宋体";
</script>
删除DOM节点
parentElement、removeChild()
先获取父节点，再通过父节点删除子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<div id="parent">
<p id="first">First</p>
<p>Second</p>
</div>
</body>
</html>
<script>
"use strict";
/**
* parentElement：获取父节点
* removeChild：删除孩子节点
*/
let first = document.getElementById("first");
let parent = first.parentElement;
parent.removeChild(first);
parent.removeChild(parent.children[0]);
console.log(parent);
</script>
创建、插入DOM节点
innerText和innerHTML会覆盖原本的内容，不能用来插入节点
createElement()、appendChild()、setAttribute()、insertBefore()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<div id="out">Out</div>
<div id="parent">
<p>First</p>
<p>Second</p>
</div>
<ol id="test-list">
<li class="lang">Scheme</li>
<li class="lang">JavaScript</li>
<li class="lang">Python</li>
<li class="lang">Ruby</li>
<li class="lang">Haskell</li>
</ol>
</body>
</html>
<script>
"use strict";
let parent = document.getElementById("parent");
/**
* appendChild()：在父节点最后插入一个子节点，必须是一个节点
* 插入已有的节点
*/
parent.appendChild(out);
/**
* 插入新建的节点，赋值id和文本内容
* innerHTML可以创建多媒体标签节点
*/
let newNode1 = document.createElement("p");
newNode1.id = "new";
newNode1.innerText = "newNode"
parent.appendChild(newNode1);
let newNode2 = document.createElement("p");
newNode2.innerHTML = "<img src='./万叶.jpg'>"
parent.appendChild(newNode2);
/**
* setAttribute()标准写法
* 可以直接创建HTML可识别的标签
*/
let img = document.createElement("img");
img.setAttribute("type", "img");
img.src="./万叶.jpg";
parent.appendChild(img);
/**
* 还可以动态地给文档添加新的CSS
*/
let css = document.createElement("style");
css.setAttribute("type", "text/css");
css.innerHTML = "p {color : red}";
document.getElementsByTagName("head")[0].appendChild(css);
/**
* insertBefore()：将一个节点插入到另一个节点的前面
*/
let par = document.getElementById("test-list");
let before = par.children[0];
let move = par.children[4];
par.insertBefore(move, before);
par.appendChild(par.children[1]);
</script>
分类:
JavaScript
标签:
JavaScript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本