JavaScript红宝书之DOM基础、MutationObserver接口(H5)

属性名不区分大小写。
DOMHTML和XML文档的编程接口,表示由多层节点构成的文档,通过他开发者可以添加、删除和修改页面的各大部分。是真正跨平台、语言无关的表示和操作网页的方式。

任何HTML或XML文档都可以用DOM表示为一个由节点构成的层级结构
JavaScript是一种脚本语言,DOM是用来获得和操作HTML文档的节点属性。JavaScript通常是通过DOM来获得和操作HTML属性的。

DOM0:不是W3C规范。
DOM1:开始是W3C规范。专注于HTML文档和XML文档。Node
DOM2:增加了style样式表对象模型、扩展了方法(e.g:getElementById)、event
DOM3:增加了内容模型 (DTD 、Schemas) 和文档验证Validation、键盘事件

每个文档只能有一个文档元素,在HTML中是< html >元素,在XML中任何元素都可以成为文档元素。
document.firstChild == document.Element ==html

DOM

attribute是作为HTML标签的属性
property是DOM元素在JavaScript中作为对象的属性
对于HTML的标准属性来说,这两者是同步的,会自动更新。但是对于自定义的属性来说,不同步。
创建元素的三种方法:
document.write(“标签的代码及内容”);替换当前页面的所有
对象.innerHTML=“标签的代码及内容”; 替换对象的子DOM
document.createElement(“标签的代码及内容”); 需要自己手动挂载到DOM树上

Node类型

所有DOM节点类型都必须实现Node接口,在js中实现Node类型,所有节点类型都继承其。
每个节点都有nodeType属性,表示该节点类型,12个数值常量。

  1. ELEMENT_NODE
  2. ATTRIBUTE_NODE
  3. TEXT_NODE
  4. CDATA_SECTION_NODE
  5. ENTITY_REFERENCE_NODE
  6. ENTITY_NODE
  7. PROCESSING_INSTRUCTION_NODE
  8. COMMENT_NODE 注释
  9. DOCUMENT_NODE
  10. .DOCUMENT_TYPE_NODE <!doctype>
  11. DOCUMENT_FRAGMENT_NODE
  12. NOTATION_NODE

节点类型:文本内容、注释、文档类型、CDATA区块、文档片段……
浏览器并不支持所有节点类型

节点关系

ownerDocument指向代表整个文档的文档节点的指针,可以迅速访问文档节点。
childNodes属性指向一个NodeList实例(一个类数组对象,可通过 [下标] 访问)
parentNodes属性指向父元素
previousSibling、nextSibling属性运用在同胞节点之间

操纵节点关系
每个节点都有一个ownerDocument属性表示所属文档,调用appendChild的时候如果ownerDocument不是指向当前文档就会报错。
importNode()将外部文档的一个节点拷贝一份,再appendChild

fatherN.appendChild(newN);//给父节点添加一个末尾子节点
fatherN.insertBefore(newN,fatherN.firstChild);//插入到指定子节点前面
fatherN.replaceChild(newN,fatherN.firstChild);//替换首个子节点
fatherN.removeChild(fatherN.firstChild);//删除

cloneNode(布尔值); //返回调用他的节点的副本
true 深复制,即复制节点及整个子DOM树
false 返回节点属于文档所有没有指定父节点

normalize();//检查修复节点的所有后代,删除空文本节点,合并一些节点

节点的比较
isSameNode();//相等,比较id外的属性
isEqualNode();//相同

Document对象 _9

文档信息
document.URL//当前页面的完整URL
document.domain//页面的域名,与URL相关
document.referrer//链接到当前页面的前页面的URL

domain属性是可以设置值的,但是

  1. 不能设置URL中不包含的值。
  2. 域名放松可以,收紧报错。p2p.wor.com=>wor.com可以,反之报错

定位元素

document.getElementById(“要求大小写一致”);//查找的第一个元素

document.getElementByTagName("img");//HTML返回了类似NodeList的HTMLCollection对象,该对象除了下标访问,还提供了namedItem("元素name属性值“)。
document.getElementByName("元素name值");//常见于单选按钮


document.getElementByTagName("*");//返回所有元素

DOM兼容性检测
document.implementation属性值是一个对象,提供了与浏览器DOM实现相关的信息和能力

文档写入
在页面加载中向页面动态添加内容,常用于动态包含外部资源,如:JavaScript文件。可以创建DOM元素。

document.write("字符串参数”);
document.writeLn("字符串参数”);

注意在页面渲染期间是追加,但是页面加载完成之后调用就是重写页面。

<html>

<head>
  <title>Write example</title>

  <script>
    function newContent() {
      document.open();
      document.write("<h1>Out with the old, in with the new!</h1>");
      document.close();
    }
  </script>
</head>

<body onload="newContent();">
  <p>Some original document content.</p>
</body>

</html>

Element类型 _1

getAttribute();
setAttribute();
removeAttribute();

document.createElement(“div");//接受tag名参数

创建出来之后还需要添加到DOM树中,才会被浏览器渲染

Text类型 _3

包含文本内容的元素会有一个文本子节点

let element =document.createElement("div");
let textN=document.creatTextNode("hello");
element.appendChild(textN);
document.body.appendChild(element);

拆分文本节点
splitText(i);//i及以后 、i前

Comment _8

createComment(“sssss”);

DocumentFragment类型

唯一在标记中没有对应表示的类型,充当节点暂时的仓库

事件、方法接口

查找DOM

var el = document.querySelector(".myclass");

MutationObserver接口

观察元素、元素属性、文本的变化

// 选择需要观察变动的节点
const targetNode = document.getElementById('some-id');
// 观察器的配置(需要观察什么变动)
const config = { attributes: true, childList: true, subtree: true };
// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);
// 之后,可停止观察
observer.disconnect();

每次回调都会收到一个MutationRecord实例的数组(可能同时多个满足观察条件的事件、时间顺序),实例包含的信息包括发生了什么变化,以及DOM的哪一部分受到影响。

核心是异步回调记录队列模型,为了在大量变化事件发生时不影响性能,每次变化的信息(由观察者实例决定)会保存在MutationRecord实例中,然后添加到记录队列(所有DOM变化事件的有序列表)。
takeRecords()方法可以清空记录队列

MutationEvent定义了一组会在各种DOM变化时触发的事件,由于浏览器事件的实现机制,这个接口出现了严重的性能问题。所以DOM Level3推出了MutationObserver。

MutationObserver实例与目标节点之间的引用关系是非对称的。
MutationObserver拥有对要观察的目标节点的弱引用,所以不会妨碍垃圾回收程序回收目标节点。
然而,目标节点却拥有对MutationObserver的强引用,如果目标节点从DOM中被移除,随后关联的MutationObserver也被垃圾回收。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值