day6JS-DOM(文档对象模型)

DOM树

DOM 操作

1. 获取元素

1.1 根据id名获取元素

document.getElementById("id名");

案例：

<body>
    <div id="box">div盒子</div>
    <h1>一级标题</h1>
    <script>
        console.log(document.getElementById("box"))
    </script>
</body>

1.2 根据标签名获取

 // 返回一个集合 （类数组对象）从整个文档获取
document.getElementsByTagName("标签名")  

// 从element的后代元素中获取
element.getElementsByTagName("标签名")

案例：

<body>
    <div id="box">div盒子</div>
    <h1>一级标题</h1>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <script>
        //获取到文档中所有的p标签，返回的是一个集合
        console.log(document.getElementsByTagName("p"))
    </script>
</body>

1.3 根据类名获取（不兼容ie6~8）

 // 返回一个集合（类数组对象）  从整个文档获取
document.getElementsByClassName("class名")  

// 从element的后代中获取
element.getElementsByClassName("class名")

案例：

<body>
    <div class="box">div盒子</div>
    <h1>一级标题</h1>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <script>
        console.log(document.getElementsByClassName("box"))
    </script>
</body>

1.4 根据 name 属性值获取(适用于表单标签)

正常的规范中，咱们只会给表单元素起name值，如果给其它元素设置name，在ie9以下版本浏览器不兼容，是获取不到的，所以为了这种情况，咱们以后养成习惯，只给表单元素用name，非表单元素不用name。

 //返回集合，只有document才有该方法
document.getElementsByName("name属性的值")

案例：

<body>
    用户名：<input type="text" name="usename" value="">
    用户名：<input type="password" name="pwd" value="">
    <script>
        console.log(document.getElementsByName("usename"))
    </script>
</body>

1.5 根据css选择器获取（重点记忆）

注意：querySelector（） 和querySelectorAll（） 在ie6-ie8 下不兼容。

 //选择器第一个满足选择器条件的
document.querySelector(选择器)
//选择所有满足选择器条件的，返回nodeList（类数组对象）  
document.querySelectorAll(选择器) 

element.querySelector(选择器)
element.querySelectorAll(选择器)

案例：

<body>
    <div id="divbox">
        <p class="pbox">段落1</p>
        <p>段落2</p>
        用户名：<input type="text" name="usename" value="">
    </div>
    <script>
        //querySelector只能获取第一个符合条件的元素
        console.log(document.querySelector("#divbox"))
        console.log(document.querySelector(".pbox"))
        console.log(document.querySelector("#divbox p"))
        // querySelectorAll获取所有符合条件的元素，返回的是集合
        console.log(document.querySelectorAll("#divbox"))
        console.log(document.querySelectorAll(".pbox"))
        console.log(document.querySelectorAll("#divbox p"))
        console.log(document.querySelectorAll("input"))
    </script>
</body>

注意！！！

根据css选择器获取时，是什么选择器就要带上该选择器的语法符号。

例如：id选择器 ---- #选择器名；类选择器 ---- .选择器名

1.6 获取Head元素对象

document.head

案例：

<body>
    <script>
        console.log(document.head);
    </script>
</body>

1.7 获取body元素对象

document.body

案例：

<body>
    <script>
        console.log(document.body);
    </script>
</body>

1.8 获取html元素对象

document.documentElement

案例：

<body>
    <script>
        console.log(document.documentElement);
    </script>
</body>

1.9 获取一屏幕的宽度或者高度

// 获取一屏幕的高度
let vH = document.documentElement.clientHeight || document.body.clientHeight;

// 获取一屏幕的宽度
let vW = document.documentElement.clientWidth || document.body.clientWidth;

1.10 id小妙招

直接把id当成变量去用的时候，可以获取相应的id元素。（浏览器的机制）。

<div id="box1">111</div>
<script>
  console.log(box1)
</script>

2. 节点

2.1 常用的节点5个

文档节点
属性节点
元素（标签）节点
文本节点
注释节点

2.2 文档节点

nodeType（节点类型）：9（类型值9就是文档节点）
nodeName（节点名称）：" #document "
nodeValue（节点值）: null

案例:

<body>
    <script>
        console.log(document.nodeType);//9
        console.log(document.nodeName);//#document
        console.log(document.nodeValue);//null
    </script>
</body>

2.3 元素节点（重点记忆）

nodeType（节点类型）：1（类型值1就是元素节点）
nodeName（节点名称）：大写的标签名
nodeValue（节点值）: null

案例：

<body>
    <div id="box">111</div>
    <div class="one">222</div>
    <h1>大标题</h1>
    <script>
        // 1.根据id属性先获取元素
        let divBox = document.getElementById("box");
        console.log(divBox.nodeType);//1
        console.log(divBox.nodeName);//DIV
        console.log(divBox.nodeValue);//null

        let divBox2 = document.querySelector("h1");
        console.log(divBox2.nodeType);//1
        console.log(divBox2.nodeName);//H1
        console.log(divBox2.nodeValue);//null
    </script>
</body>

2.4 属性节点

nodeType（节点类型）：2（类型值2就是属性节点）
nodeName（节点名称）：属性名
nodeValue（节点值）: 属性值

getAttributeNode("属性名") 方法从当前元素中通过属性名称获取属性节点。

案例：

<body>
    <div id="box" class="one" name="xiaoxiao">111</div>
    <script>
        // 1.先获取属性
        var myclass1 = box.getAttributeNode("class");
        // 2.在控制台输出
        console.log(myclass1);//class="one"
        console.log(myclass1.nodeType);//2
        console.log(myclass1.nodeName);//class
        console.log(myclass1.nodeValue);//one

        // 1.先获取属性
        var myclass2 = box.getAttributeNode("name");
        // 2.在控制台输出
        console.log(myclass2);//name="xiaoxiao"
        console.log(myclass2.nodeType);//2
        console.log(myclass2.nodeName);//name
        console.log(myclass2.nodeValue);//xiaoxiao
    </script>
</body>

2.5 文本节点

nodeType（节点类型）：3（类型值3就是文本节点）
nodeName（节点名称）：" # text "
nodeValue（节点值）: 文本内容
在标准浏览器中，换行和空格也属于文本节点

使用childNodes方法获得文本内容。

案例：

<body>
    <div id="box">111</div>
    <div class="one">222</div>
    <h1>大标题</h1>
    <script>
        // 1.根据id属性先获取元素
        let h1Box = document.querySelector("h1");
        let textBox = h1Box.childNodes[0];
        console.log(textBox);//"大标题"
        console.log(textBox.nodeType);//3
        console.log(textBox.nodeName);//#text
        console.log(textBox.nodeValue);//大标题
    </script>
</body>

2.6 注释节点

nodeType（节点类型）：8（类型值8就是注释节点）
nodeName（节点名称）：" #comment "
nodeValue（节点值）: 注释的内容

<body>
    <!--这是一个div -->
    <div id="box">111</div>
    <script>
        let commentBox = document.body.childNodes[1];
        console.log(commentBox);//<!--这是一个div -->
        console.log(commentBox.nodeType);//8
        console.log(commentBox.nodeName);//#comment
        console.log(commentBox.nodeValue);//这是一个div
    </script>
</body>

3. 节点之间关系的属性

3.1 节点类

parentNode ：父节点。

childNodes ：所有子节点的集合。

firstChild ：第一个子节点。

lastChild ：最后一个子节点。

previousSibling ：上一个兄弟节点。

nextSibling ：下一个兄弟节点。

3.2 元素类

children ：所有子元素的集合。

firstElementChild ：第一个子元素 IE9+。

lastElementChild ：最后一个子元素 IE9+。

previousElementSibling ：上一个兄弟元素 IE9+。

nextElementSibling ：下一个兄弟元素 IE9+。

4. 节点查找方式

4.1 parentNode（父节点）

获取当前节点唯一的父亲节点。

<body>
    <div id="box">111</div>
    <script>
        console.log(box.parentNode);
    </script>
</body>

4.2 childNodes（子节点）

获取当前节点所有的子节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <script>
        console.log(ulBox.childNodes);//NodeList(7)
    </script>
</body>

注意！！！

在js中换行和空格也算是text文本内容。

4.3 firstChild

获取当前节点的第一个子节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <script>
        console.log(ulBox.firstChild);//#text
    </script>
</body>

4.4 lastChild

获取被选节点的最后一个子节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <script>
        console.log(ulBox.lastChild);//#text
    </script>
</body>

4.5 previousSibling

获取当前节点的上一个兄弟节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <h1>标题</h1>
    <script>
        console.log(ulBox.previousSibling);//#text
    </script>
</body>

4.6 nextSibling

获取当前节点的下一个兄弟节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <h1>标题</h1>
    <script>
        console.log(ulBox.nextSibling);//#text
    </script>
</body>

5. 元素查找方式

5.1 children

获取当前元素所有的元素子节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <h1>标题</h1>
    <script>
        console.log(ulBox.children);//[li,li,li]
    </script>
</body>

5.2 firstElementChild

获取当前节点的第一个元素子节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <h1>标题</h1>
    <script>
        console.log(ulBox.firstElementChild);//<li>查找子节点1</li>
    </script>
</body>

5.3 lastElementChild

获取当前节点的最后一个元素子节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <h1>标题</h1>
    <script>
        console.log(ulBox.lastElementChild);//<li>查找子节点3</li>
    </script>
</body>

5.4 previousElementSibling

获取当前节点的上一个兄弟元素节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <h1>标题</h1>
    <script>
        console.log(ulBox.previousElementSibling);//<div id="box">111</div>
    </script>
</body>

5.5 nextElementSibling

获取当前节点的下一个兄弟元素节点。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <h1>标题</h1>
    <script>
        console.log(ulBox.nextElementSibling);//<h1>标题</h1>
    </script>
</body>

6.练习题

使用previousSibling编写出previousElementSibling的效果。

<body>
    <div id="box">111</div>
    <ul id="ulBox">
        <li>查找子节点1</li>
        <li>查找子节点2</li>
        <li>查找子节点3</li>
    </ul>
    <h1>标题</h1>
    <script>
        function getPreviousSibling(itme) {
            let getPrevious = itme.previousSibling;
            while (getPrevious && getPrevious.nodeType !== 1) {
                getPrevious = getPrevious.previousSibling;
            }
            return getPrevious;
        }
        let ulBox = document.querySelector("#ulBox");
        let result = getPreviousSibling(ulBox);
        console.log(result);
    </script>
</body>

DOM 的增删改

1. createElement：创建一个元素

document.createElement("标签名");

案例：

<body>
    <script>
        // 1.创建标签
        let div = document.createElement("div");
        // 2.给标签添加内容
        div.innerHTML = "这是一个div标签";
        // 3.把标签写入页面
        document.body.appendChild(div);
    </script>
</body>

2. createTextNode: 创建一个文本节点

var/let 变量名 = document.createTextNode("文本内容");

案例：

<body>
    <script>
        // 1.创建标签
        let div = document.createElement("div");
        // 2.给标签添加内容
        let divText = document.createTextNode("这是一个div标签");
        div.appendChild(divText);
        // 3.把标签写入页面
        document.body.appendChild(div);
    </script>
</body>

3. appendChild: 把元素追加到一个容器的末尾

语法：父元素.appendChild(子元素)；

<body>
    <script>
        // 1.创建标签
        let div = document.createElement("div");
        // 2.给标签添加内容
        let divText = document.createTextNode("这是一个div标签");
        div.appendChild(divText);
        // 3.把标签写入页面
        document.body.appendChild(div);
    </script>
</body>

4. insertBefore: 把一个元素插入到另一个元素的前面

步骤一：创建一个标签（元素）。

步骤二：给标签（元素）添加内容。

步骤三：获取到指定一个父节点。然后父节点使用insertBefore插入。

语法：
var/let 变量名 = 父节点.insertBefore(新的子元素, 旧的子元素)

案例：

<body>
    <ul>
        <li>1</li>
        <li id="two">2</li>
    </ul>
    <script>
        // 1.创建标签
        let li = document.createElement("li");
        // 2.给标签添加内容
        li.innerHTML = "3";
        // 3.获取到要加入的父元素
        let ulParent = document.querySelector("ul");
        // 4. 将新元素插入到旧的元素之前
        ulParent.insertBefore(li, two);
    </script>
</body>

使用该方法还可以交换标签的位置。

<body>
    <ul>
        <li id="one">1</li>
        <li id="two">2</li>
    </ul>
    <script>
        // 1.获取到要加入的父元素
        let ulParent = document.querySelector("ul");
        // 1. 交换位置
        ulParent.insertBefore(two, one);
    </script>
</body>

5. cloneNode: 把某一个节点进行克隆

cloneNode()浅克隆：只是克隆了一个节点，里面的内容还有样式都没克隆。
cloneNode(true)深克隆：把节点包含的所有内容和样式进行克隆。

<body>
    <ul>
        <li id="one" style="color: red">111</li>
        <li id="two">222</li>
    </ul>
    <script>
        // 1.获取到要克隆的元素
        let ulParent = document.querySelector("ul");
        // 2. 无参，只克隆了一个节点，不克隆样式
        let con1 = ulParent.cloneNode();
        document.body.appendChild(con1);//页面不显示内容
        // 3. 有参，既有内容，又有样式
        let con2 = ulParent.cloneNode(true);
        document.body.appendChild(con2);
    </script>
</body>

6. removeChild：移除某个节点

【context】.removeChild(ele);

<body>
    <ul>
        <li id="one" style="color: red">111</li>
        <li id="two">222</li>
    </ul>
    <script>
        // 1.获取到要克隆的元素
        let ulParent = document.querySelector("ul");
        ulParent.removeChild(one);
        console.log(ulParent);
    </script>
</body>

7. set/get/removeAttribute()

setAttribute()：设置当前元素的某一个自定义属性。
getAttribute()：获取当前元素的某一个自定义属性。
removeAttribute()：删除当前元素的某一个自定义属性。

box.setAttribute("index", 1);
box.getAttribute("index");
box.removeAttribute("index");
console.log(box)
// 设置
// box["aa"] = 22;
// 获取
// box["aa"]
//移除
// delete box["aa"];

基于键值对方式增删改：修改当前对象的堆内存空间完成的（在堆内存空间可以看到）

基于Attribute dom方法增删改，是修改html结构来完成的（此种方法设置的在结构上可以看到）。

以上两种方式不能混用

8. 练习题

利用a标签的href来重新获取url参数。

前置知识：a标签的两个方法：

<a href="http://www.zhufengpeixun.cn?name=lili&age=18#123"></a>

a.search ：截取网址？（包括？）之后的内容。例如：?name=lili&age=18

a.hash：截取网址#（包括#）之后的内容。例如：#123

<body>
    <a href="http://www.zhufengpeixun.cn?name=lili&age=18#123"></a>
    <script>
        function getUrl() {
            let a = document.querySelector("a");
            let obj = {};
            obj.hash = a.hash.slice(1);
            let searchStr = a.search.slice(1).split("&");
            for (let i = 0; i < searchStr.length; i++) {
                let arr = searchStr[i].split("=");
                obj[arr[0]] = arr[1];
            }
            return obj;
        }
        console.log(getUrl());
    </script>
</body>