javascript红宝书学习(五)DOM

关于dom一些常用的命令学习
1，someNode.nodeName:展示当前标签的属性名称。

<h1 id = 'aa'><p>cc</p>pic test</h1>
<h1 id = 'bb'>bb</h1>
<script>
let someNode = document.getElementById("aa");
console.log(someNode.nodeName); // 展示的是h1
console.log(someNode.nodeValue); // null
let firstChild = someNode.childNodes[1]; // 选择的是<p>cc</p>这个标签
console.log(firstChild.nodeName); // p
let childNodeArray = Array.from(someNode.childNodes);
console.log(childNodeArray); // [p,text] ES6的语法
// 每个节点都有对应的父类节点和子类节点
let parentNode = childNodeArray[0].parentNode;  // 和someNode是一致的
let chidlNodeAppend = document.getElementById("bb");
someNode.appendChild(chidlNodeAppend); // 添加子节点，添加后此时somdeNode包含三个node内容，添加位置为尾部
// 在头部填写，这里需要注意一下，当执行完someNode.appendChild(chidlNodeAppend);后
// 在去执行下面的方法时，会进行覆盖，而不是添加两次node
someNode.insertBefore(chidlNodeAppend,someNode.firstChild);
// node节点也可以通过替换的方式进行位置更改
someNode.replaceChild(chidlNodeAppend,someNode.lastChild); // [p, h1#bb]
// 删除第一个节点
let formerFirstChild = someNode.removeChild(someNode.firstChild);
// 所有节点共享两个方法：cloneNode()接受一个参数，判断是否深/浅复制
let deepList = someNode.cloneNode(false);
// 浅复制只复制一层，所以返回的值为0
console.log(deepList.childNodes.length);
let deepList2 = someNode.cloneNode(true);
// 深复制会把所有内容进行复制，所以返回为2(子节点也会进行复制)
console.log(deepList2.childNodes.length);
// 共享方法二：normalize() 
<script>

Document类型

Document对象是HTMLDocument的实例(HTMLDocument继承Document),document是windows的对象属性
nodeType 等于 9;
nodeName 值为"#document";
nodeValue 值为 null;
parentNode 值为 null;
ownerDocument 值为 null;
子节点可以是 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或 Comment 类型。

// 常用方法
// 读取文档标题
let title = documet.title;
// 取得完整的URL  
let url = document.URL;
// 取得域名  
let domain = document.domain;
// 取得来源  
let referrer = document.referrer;

定位元素

// 常用的定位元素的方法分getElementById()和getElementByTagName()
// 其中getElementById()：是获取当前元素的id
// getElementByTagName():是获取当前元素的名称 例如：
// 这里返回的类型是：HTMLCollection
<h1 id = 'aa' name = "a1"><p>cc</p>pic test</h1>
<h1 id = 'bb' name = "b1">bb</h1>
let h1_doc = document.getElementByTagName("h1");
// 指定对应的name有两种方法，一种是HTMLCollection方法中存在nameItem()和[]形式去获取
h1_doc.nameItem("b1"); // 打印为<h1 id = 'bb' name = "b1">bb</h1>
h1_doc["bi"] === h1_doc.nameItem("b1") // 他们俩等价
// 同理 document中包含getElementByName()方法也是返回的是 NodeList

dom外部引入js

// 常用的方法包括document.write()和document.writeln()，其中writeln会在尾部加一个\n
document.write("<script type=\"text/javascript\" src=\"test.js\">" +"<\/script>");

Element类型

Element表示xml或者html的元素，对外暴露访问元素的标签名，子节点和属性能力

• 1 nodeType 等于 1;
  
• 2 nodeName 值为元素的标签名;
  
• 3 nodeValue 值为 null;
  
• 4 parentNode 值为 Document 或 Element 对象;
  
• 5 子节点可以是 Element、Text、Comment、ProcessingInstruction、CDATASection、 HTML元素 id，元素在文档中的唯一标识符;
  title，包含元素的额外信息，通常以提示条形式展示;
  lang，元素内容的语言代码(很少用);
  dir，语言的书写方向("ltr"表示从左到右，"rtl"表示从右到左，同样很少用);
  className，相当于 class 属性，用于指定元素的 CSS 类(因为 class 是 ECMAScript 关键字， 所以不能直接用这个名字)。

// 首先学习一下自定义属性
<div id = "mydiv" my_customize_attr = "hello world">
let mydiv = document.getElementById("mydiv");
let att_val = mydiv.getAttribute("my_customize_attr");
console.log(att_val); // 打印hello world
// 可以通过setAttribute("")去设置属性
// removeAttribute() 可以删除属性

创建元素
使用document.createElement("div"):方式进行创建div
Text类型
nodeType 等于 3;
nodeName 值为"#text";
nodeValue 值为节点中包含的文本;  parentNode 值为 Element 对象;  不支持子节点。
Text 节点中包含的文本可以通过 nodeValue 属性访问，也可以通过 data 属性访问，这两个属性 包含相同的值。修改 nodeValue 或 data 的值，也会在另一个属性反映出来。文本节点暴露了以下操 作文本的方法:
appendData(text)，向节点末尾添加文本 text;
deleteData(offset, count)，从位置 offset 开始删除 count 个字符;
insertData(offset, text)，在位置 offset 插入 text;
replaceData(offset, count, text)，用 text 替换从位置 offset 到 offset + count 的 文本;
splitText(offset)，在位置 offset 将当前文本节点拆分为两个文本节点;
substringData(offset, count)，提取从位置 offset 到 offset + count 的文本。 EntityReference 类型。
MutationObserver接口

// 可以在DOM被修改的时候异步回调
let mo = new MutationObserver((MutationRecord) => console.log(MutationRecord))
// observe的方法：要通过这个方法与dom连接起来
// observe(target, config)：  
// target：需要监听的元素 [element]  
// config：需要监听的属性 [Object] 例如 `attributes` \ `childList`等
mo.observe(document.body, { attributes: true });
// 回调与 MutationRecord 

observe()的config属性用法 通过下面一个例子学习一下异步监听回调

<div id = 'aa' bba="helloasdasd!" name = "a1"><p>cc</p>pic test</div>
<script>
	(function(){
		let div = document.getElementById("aa");
		let config = {attributes: true}
                // 定义异步回调
		let ob  = new MutationObserver((MutationObserver) => console.log(MutationObserver));
                // 进行绑定
		ob.observe(div,config);
                // 设置属性
		div.setAttribute("name","张三");
		div.style.background = 'black'// 修改样式
	})();
</script>

其中：attributeName：指监控设置的属性，type:我们修改的类型

上图对应的解释

• 1，target：被修改影响的目标节点
• 2，type：被修改影响的目标节点 字符串，表示变化的类型:"attributes"、"characterData"或"childList"
• 3，oldValue：如果在 MutationObserverInit 对象中启用(attributeOldValue 或 characterData OldValue为true)"attributes"或"characterData"的变化事件会设置这个属性为被替代的值 "childList"类型的变化始终将这个属性设置为 null
• 4，attributeName：对于"attributes"类型的变化，这里保存被修改属性的名字 其他变化事件会将这个属性设置为 null
• 5，attributeNamespace：对于使用了命名空间的"attributes"类型的变化，这里保存被修改属性的名字 其他变化事件会将这个属性设置为 null
• 6，addedNodes：对于"childList"类型的变化，返回包含变化中添加节点的 NodeList 默认为空 NodeList
• 7，removedNodes：对于"childList"类型的变化，返回包含变化中删除节点的 NodeList 默认为空 NodeList
• 8，previousSibling：对于"childList"类型的变化，返回变化节点的前一个同胞 Node 默认为 null
• 9，nextSibling：对于"childList"类型的变化，返回变化节点的后一个同胞 Node 默认为 null
  disconnect方法终止回调,takeRecords方法获取修改记录

let ob  = new MutationObserver((MutationObserver) => console.log(MutationObserver));
// 终止监听
ob.disconnect();
ob.takeRecords();// 会获取修改记录，当使用这个方法后，会覆盖上面创建的console.log(MutationObserver)打印

MutationObserver是可以监控多个元素的

let div = document.getElementById("aa");
let h1 = document.getElementById("bb");
let config = {attributes: true}
let ob  = new MutationObserver((MutationObserver) => console.log(MutationObserver));
// 可以同时监听两个元素
ob.observe(div,config);
ob.observe(h1,config);
div.id = '123';
h1.id = '456';
console.log("ob.takeRecords()");
console.log(ob.takeRecords());

监听范围MutationObserverInit对象
上面的监听都是以监听其他的东西，比如：文本、子节点等。

let config = {attributes: true,
	attributeFilter: ["name"], // 设置监听属性的列表，相当于设置白名单
	attributeOldValue: true, // 记录旧值的修改
	characterData: true,      // 观察文本的变化
	characterDataOldValue: true,  // 记录旧值数据
	childList: true   // 观察子节点的变化
}

NodeType的12种类型

1 ELEMENT_NODE  元素节点
2 ATTRIBUTE_NODE  属性节点
3 TEXT_NODE  文本节点
4 CDATA_SECTION_NODE  CDATA区段
5 ENTITY_REFERENCE_NODE 实体引用元素
6 ENTITY_NODE  实体
7 PROCESSING_INSTRUCTION_NODE  表示处理指令
8 COMMENT_NODE  注释节点
9 DOCUMENT_NODE  最外层的Root element，包括所有其他子节点
10 DOCUMENT_TYPE_NODE  
11 DOCUMENT_FRAGMENT_NODE  文档碎片节点
12 NOTATION_NODE  DTD中声明的符号节点