JavaScript学习笔记——DOM节点的CRUD

节点（Node）

节点： 构成 HTML 网页的最基本单元。

常见节点

• 文档节点
• 元素节点
• 属性节点
• 文本节点

DOM节点层次

树形结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCFKFRZd-1590412835591)(http://i.imgur.com/tY1ymHt.png)]

元素节点的获取

• getElementById 只能获取Document中的元素
• getElementsByTagName
• getElementsByClassName
• getElementsByTagName
• getElementsByClassName

var div1 = document.getElementById("box1"); // 通过 id 获取 一个 元素节点

var arr1 = document.getElementsByTagName("div"); // 通过 标签名 获取 元素节点数组，所以有s

var arr2 = document.getElementsByClassName("hehe"); // 通过 类名 获取 元素节点数组，所以有s

document.getElementsByTagName("div1")[0];    //取数组中的第一个元素

document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

补充

getElementById() 只有在作为 document 的方法时才能起作用，而在DOM中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的 “局部” 版本。

获取父节点

<!--body部分-->
<div id="d1">
    <div id="d2">
    </div>
</div>

parentNode

节点.parentNode
var son = document.getElementById("d2")
var parent = son.parentNode
console.log(parent)	// <div id="d1">…</div>

parentElement

节点.parentElement
var son = document.getElementById("d2")
var parent = son.parentElement
console.log(parent)	// <div id="d1">…</div>

获取兄弟节点

<!--body部分-->
<ul id="u1">
    <li class="l1"></li>
    <li class="l2"></li>
    <li class="l3"></li>
</ul>

1. 下一个节点 | 下一个元素节点

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

nextSibling

var bro1 = document.getElementsByClassName("l2")
//getElementsByClassName返回值为伪数组
var bro2 = bro1[0].nextSibling
console.log(bro2)	// #text

nextElementSibling

var bro1 = document.getElementsByClassName("l2")
//getElementsByClassName返回值为伪数组
var bro2 = bro1[0].nextElementSibling
console.log(bro2)	// <li class="l3"></li>

2. 上一个节点 | 上一个元素节点

前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

previousSibling

var bro1 = document.getElementsByClassName("l2")
var bro2 = bro1[0].previousSibling
console.log(bro2)	// #text

previousElementSibling

var bro1 = document.getElementsByClassName("l2")
var bro2 = bro1[0].previousElementSibling
console.log(bro2)	// <li class="l1"></li>

3. 补充：获得任意一个兄弟节点

节点自己.parentNode.children[index]

var bro1 = document.getElementsByClassName("l1")
var bro2 = bro1[0].parentNode.children[0]
console.log(bro2)	// <li class="l1"></li>

获取子节点

<!--body部分-->
<ul id="u1">
    <li class="l1"></li>
    <li class="l2"></li>
    <li class="l3"></li>
</ul>

获取单个子节点

1. 第一个子节点 | 第一个子元素节点

第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

firstChild

var parent = document.querySelector("#u1")
var son = parent.firstChild
console.log(son)	// #text

firstElementChild

var parent = document.querySelector("#u1")
var son = parent.firstElementChild
console.log(son)	// <li class="l1"></li>

2. 最后一个子节点 | 最后一个子元素节点

最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild

lastChild

var parent = document.querySelector("#u1")
var son = parent.lastChild
console.log(son)	// #text

lastElementChild

var parent = document.querySelector("#u1")
var son = parent.lastElementChild
console.log(son)	// <li class="l3"></li>

获取所有子节点

childNodes

子节点数组 = 父节点.childNodes

var parent = document.querySelector("#u1")
var sons = parent.childNodes
console.log(sons)	// NodeList(7) [text, li.l1, text, li.l2, text, li.l3, text]

children（使用最多）

子元素数组 = 父节点.children

var parent = document.querySelector("#u1")
var sons = parent.children
console.log(sons)	// HTMLCollection(3) [li.l1, li.l2, li.l3]

属性节点的获取

属性节点是建立在元素节点下的节点，一般只获取属性节点的值

<!--body部分-->
<ul id="app" class="active">
	<li>1</li>
	<li>2</li>

获取属性值

var appNode = document.querySelector("#app")

//Element.getAttributeNode(attrName)	（获取属性节点）
var idAttr = appNode.getAttributeNode("id")
var val1 = idAttr.appNode
console.log(val1)	//app	(麻烦)

//Element.getAttribute(attributeName)	（获取属性节点的值）
var val2 = appNode.getAttribute("id")
console.log(val)	//app

//Element.attrName						（获取属性节点的值）
var val3 = appNode.id	//appNode["id"]
var val4 = appNode.className	//appNode["className"]
console.log(val3)	//app(不能拿自定义节点，只能拿预定义节点)
console.log(val4)

获取所有属性

var appNode = document.querySelector("#app")

console.log(appNode.getAttributeNames())
console.log(appNode.attributes)

检查属性

var appNode = document.querySelector("#app")
console.log(appNode.hasAttribute("id"))	//ture
console.log(appNode.hasAttribute("abc"))	//false

对象属性

var appNode = document.querySelector("#app")
console.log(appNode.id)
console.log(appNode.name)
console.log(appNode.className)

appNode.classList.add("active3")
console.log(appNode.className)
appNode.classList.remove("active")
console.log(appNode.className)
var firstClass = appNode.classList.item(0)
console.log(firstClass)

//classList.toggle 有就删除，没有添加
appNode.classList.toggle("abc")
console.log(appNode.className)
appNode.classList.toggle("abc")
console.log(appNode.className)
var flag = appNode.classList.contains("damu")
console.log(flag)

文本节点的获取

<!--body部分-->
<ul id="app" class="active">
	<li>1</li>
	<li>2</li>

var appNode = document.getElementById("app")
console.log(appNode.innerText)
console.log(appNode.textContent)

console.log(appNode.innerHTML)	//不常用

DOM节点的增删改（CUD）

创建元素节点

	新的标签(元素节点) = document.createElement("标签名");

    var a1 = document.createElement("li");   //创建一个li标签
    var a2 = document.createElement("adbc");   //创建一个不存在的标签
    
	console.log(a1);
    console.log(a2);

插入节点

方式1：

	父节点.appendChild(新的子节点)

解释：父节点的最后插入一个新的子节点

方式2：

	父节点.insertBefore(新的子节点, 作为参考的子节点)

解释：

• 在参考节点插入一个新的节点
• 如果参考节点为null，那么它将在父节点里面的最后插入一个子节点

删除节点

格式：

	父节点.removeChild(子节点)

解释：用父节点删除子节点

删除自己的方法：

	node1.parentNode.removeChild(node1)

克隆节点

格式：

	要复制的节点.cloneNode([false])
	要复制的节点.cloneNode(true)

解释：

• 不带参数/false：只复制节点本身，不复制子节点
• 带参数true：即复制节点本身，也复制其所有的子节点

文档的加载

​ 浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。

onload 事件：

​ onload 事件会在整个页面加载完成之后才触发。为 window 绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保代码执行时所有的DOM对象已经加载完毕了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript">
      window.onload = function() {
        var son = document.getElementById("d2")
        var parent = son.parentElement
        console.log(parent)
        };
      };
    </script>
  </head>
  <body>
    <div id="d1">
        <div id="d2">
        </div>
    </div>
  </body>
</html>