JavaScript之操作BOM、DOM对象这是我参与 8 月更文挑战的第 27 天，活动详情查看： 8月更文挑战 1.

这是我参与 8 月更文挑战的第 27 天，活动详情查看： 8月更文挑战

1. 操作BOM对象

BOM：浏览器对象模型

(1) navigatoe对象，封装了浏览器的信息。

navigator.appName
"Netscape"
navigator.appCodeName
"Mozilla"
navigator.appVersion
"5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Mobile Safari/537.36"

(2) location对象,代表当前页面的URL信息

host: "blog.csdn.net"
hostname: "blog.csdn.net"
href: "https://blog.csdn.net/ccpat/article/details/44491105"
origin: "https://blog.csdn.net"
pathname: "/ccpat/article/details/44491105"
port: ""
protocol: "https:"

(3) document，代表当前页面

document.location
Location {ancestorOrigins: DOMStringList, href: "https://www.bing.com/search?q=super%28name%29&form…11&qs=n&sk=&cvid=D099FCD46A1342A1A78EA601D989FE68", origin: "https://www.bing.com", protocol: "https:", host: "www.bing.com", …}
document.URL
"https://www.bing.com/search?q=super%28name%29&form=CHRDEF&sp=-1&pq=super%28name%29&sc=0-11&qs=n&sk=&cvid=D099FCD46A1342A1A78EA601D989FE68"

(4) history，代表浏览器的历史记录

history.forward();

2. 操作DOM对象

DOM是HTML 文档对象模型。

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的DOM元素。

(1) 获得DOM节点

getElementsByTagName() 方法可返回带有指定标签名的对象的集合;

getElementById()根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用;

getElementsByClassName() 方法返回文档中所有指定类名的元素集合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div id="student">
    <h1>标题一</h1>
    <a id="name"> queen</a>
    <a class="birth">1997</a>
    </div>
</head>
<body>
    <script>
        let h1 = document.getElementsByTagName('h1');
        let name = document.getElementById("name");
        let birth = document.getElementsByClassName("birth");
        let student = document.getElementById('student');
        //获取父节点下的所有子节点
        var students = student.children;
    </script>
</body>
</html>

（2）更新DOM节点

Id .innerText= '123' 修改文本的值;

id.innerHTML='123'解析HTML标签。

<div id="name"></div>
    <script>
        var name = document.getElementById('name');
    </script>

(3) 删除DOM节点

先获取父节点；

再删除父节点下对应的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div id="student">
    <h1>标题一</h1>
    <a id="name"> queen</a>
    <a class="birth">1997</a>
    </div>
</head>
<body>
    <script>
        var h1 = document.getElementsByTagName('h1');
        var father = h1.parentElement;
        father.removeChild(h1);
    </script>
</body>
</html>