JS高级编程 - - day03

一、获取节点示例的方法

直接获取节点实例：
1.通过内置对象 document 获取，document对象是HTMLDocument的实例
2.获取根元素的实例：document.documentElement–html标签产生的实例,所属类为HTMLHtmlElement

<script>
        let hm = document.documentElement;
        console.log(hm);
    </script>

3.获取body节点实例：document.body–body实例, 所属类为HTMLBodyElement

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

4.获取head节点实例：document.head–head实例, 所属类为HTMLHeadElement

通过方法来获取实例：
1.document.querySelector(“属性选择器”)找到在文档内第一个符合对应选择器的实例
2.document.querySelectorAll(“属性选择器”)找到在文档内全部符合对应选择器的实例，并且按顺序放在一个类数组中返回
3.document.getElementById(“id值”)找到文档内第一个符合相应Id值的实例
4.document.getElementsByTagName（”标签名“）找到文档内全部对应标签名的实例，按顺序放入一个类数组中返回，等同于document.querySelectorAll("元素选器）
5.document.getElementsByName（”name属性的值“）找到文档内全部符合相应name值的实例，按顺序放入类数组中返回
6.document.getElementsByClassName(“class属性的值”)找到文档内全部符合相应class值的实例，按顺序放入类数组中返回

注意：以上方法的document可以换成任意的一个实例ele，ele可以调用以上所有方法，并且不再是在文档中找相应实例，而是找ele内部的相应实例。

实现原理：
1.对于类的原型中的成员，类的实例对象和该类子类实例对象都能访问。
2.推出子类实例对象，可以访问父类原型中的成员

面试题：
知识点：1.document是HTMLDocument类的实例
2.如果内部没有该函数会根据原型链往上一级找

<script>
	Node.prototype.show = function() {
		console.log("Node")
	}
	Document.prototype.show = function() {
		console.log("Document.prototype.show()");
	}
	HTMLDocument.prototype.show = function() {
		console.log("HtmlDocument.prototype.show()")
	}
	document.show();//"HtmlDocument.prototype.show()"
	
	console.log(document instanceof HTMLDocument)//true
</script>

根据节点实例中属性获取节点实例：
1.ele.parentNode得到父节点实例 （document.documentElement不可用，已经是最顶层）
2.ele.parentElement得到父元素结点的实例,ele.offsetParent可以得到body
3.ele.childNodes得到子节点的实例的数组
4.ele.children得到子节点的实例数组
5.ele.firstChild得到子节点实例中的第一个节点实例
6.ele.firstElementChild得到子元素节点实例中的第一个元素节点实例
7.ele.lastChild得到子节点实例中的最后一个节点实例
8.ele.lastElementChild得到子元素节点实例中的最后一个元素节点实例
9.ele.previousSibling得到同级前一个节点实例
10.ele.previousElementSibling得到同级前一个元素节点实例
11.ele.nextSibling得到同级后一个节点实例
12.ele.nextElementSibling得到同级后一个元素节点实例
13.ele.ownerDocument得到document

节点实例描述属性：
nodeName
元素节点实例 nodeName=大写标签名
文本节点实例 nodeName=#text
属性节点实例 nodeName=属性名
document nodeName=#document
注释节点实例 nodeName=#comment
nodeValue
对于元素节点实例， nodeValue=null
document， nodeValue=null
对于文本节点实例， nodeValue=文本值
注释节点实例， nodeValue=文本值
对于属性节点实例， nodeValue=属性值
nodeType
对于元素节点实例， nodeType=1
对于文本节点实例， nodeType=3
对于属性节点实例， nodeType=2
对于注释节点实例， nodeType=8
document， nodeType=9

元素节点实例方法contains：
判断元素ele内部是否有元素eletarget
ele.contains(eletarget)

<div id="mydiv1">
        <div id="mydiv2" name="mydd"></div>
        <div id="mydiv2" name="mydd"></div>
    </div>
    <script>
        let div2 = document.getElementById("mydiv2");
        let div1 = document.getElementById("mydiv1")
        console.log(div1.contains(div2));//true
    </script>

二、节点操作方法

删除节点元素实例：
1.删除指定的子节点实例
document.remove Child（node)
ele.removeChild(node);
2.删除自身
元素节点实例和文本节点实例都可以调用remove()方法，删除本身
Element.prototype.remove()----------------ele.remove();
CharacterData.prototype.remove()-------文本节点.remove();

创建元素节点实例和文本节点实例：
document.createElement(“标签名”);
document.createTextNode(“文本内容”);
ele.innerText = 文本内容
Node.prototype.cloneNode(true/false);
true: 克隆元素和它的子代元素,false只克隆元素本身

加入节点实例：
Node.property.appendChild(node)//追加在最后 ele.appendChild(…)
Node.property.insertBefore(被插入节点, 已经存在的节点)//把被插入节点插入到已经存在的节点前面 ele.insertBefore(…)
Node.property.hasChildNodes(node)
实战，使用元素节点实例调用方法

节点替换（删减）：
Node.property.replaceChild(新子节点，旧子节点) ele.replaceChild(…)
实战，使用容器元素节点实例调用方法

innerHTML和innerText：
(实战：适用于容器元素节点)
Element.prototype.innerHTML 操作内部，能识别文档
HTMLElement.prototype.innerText 操作内部，只识别为text
HTMLElement.prototype.OuterHTML 操作内部和自身，能识别文档
HTMLElement.prototype.OuterText 操作内部和自身，只识别为text
都是属性，不赋值就是获取，赋值就是替换
ele.innerHTML
ele.innerText
ele.OuterHTML
ele.OuterText

属性class操作:
得到类名数组,该数组是类数组
HTMLElement.property.classList;-----ele.classList
增加类名
classList.add(“类名”)
移除类名
classList.remove(“类名”);
测试是否有实参指定的类名
classList.contains(“类名”);
用新的类名 替换以前的所有类
HTMLElement.property.className = “类名1 类名2…”; ele.className = “类名1 类名2…”;

属性style操作:
写入的值必须是字符串格式
div1.style.border=“1px solid red”;
property是组合单词必须变成小驼峰式写法,eg: div1.style.fontSize=“40px”;
property是float这样的保留字属性，前面应加“css”，eg：div1.style.cssFloat=“left”;
style只能操作内置样式

属性操作：
1.可以获取到元素相应属性的值
Element.prototype.getAttribute(“属性名”)
ele.getAttribute()
ele.属性名
当元素内没有该属性是区别：
ele.getAttribute() ------值为null
ele.属性名 ------值为 " "
2.为元素设置属性和属性值
Element.prototype.setAttribute(“属性名”，值)
ele.getAttribute()
3.可以判断元素内是否有相应属性值，返回值是布尔值
Element.prototype.hasAttribute(“属性名”)
ele.hasAttribute(“属性名”)
4.可以删除元素相应属性
Element.prototype.removeAttribute(“属性名”)
ele.removeAttribute(“属性名”)