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);//9console.log(document.nodeName);//#documentconsole.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);//1console.log(divBox.nodeName);//DIVconsole.log(divBox.nodeValue);//nulllet divBox2 = document.querySelector("h1");console.log(divBox2.nodeType);//1console.log(divBox2.nodeName);//H1console.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);//2console.log(myclass1.nodeName);//classconsole.log(myclass1.nodeValue);//one// 1.先获取属性var myclass2 = box.getAttributeNode("name");// 2.在控制台输出console.log(myclass2);//name="xiaoxiao"console.log(myclass2.nodeType);//2console.log(myclass2.nodeName);//nameconsole.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);//3console.log(textBox.nodeName);//#textconsole.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);//8console.log(commentBox.nodeName);//#commentconsole.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>