DOM

最新推荐文章于 2021-11-29 15:39:06 发布

我是小卡车呀

最新推荐文章于 2021-11-29 15:39:06 发布

阅读量178

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43262022/article/details/109076881

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

DOM

获取元素

1.getElementById

通过节点的 id 属性获取元素。

document.getElementById(id);

2.getElementsByTagName

通过标签名称获取元素。

document.getElementsByTagName(tag);

4.特殊集合

document.anchors 包含文档中所有带 name 属性的元素。

document.forms 包含文档中所有元素与 document.getElementsByTagName("form") 效果相同。

document.images 包含文档中所有元素与 document.getElementsByTagName("img") 效果相同。

document.links 包含文档中所有带有 href 属性的元素。

获取和设置

1.getAttribute

获取元素对象中查询属性的值

object.getAttribute(attribute);

2.setAttribute

设置元素对象中的属性

object.setAttribute(attribute, value);

节点关系

每个节点都有一个 childNodes 属性。其中包含一个 NodeList 的实例。NodeList 是一个类数组对象，用于存储可以按位置存放的有序节点。

访问 NodeList 中的元素：

let firstChild = someNode.childNodes[0];
let secondChild = someNode.childNodes.item(1);
let lastChild = someNode.childNodes[someNode.childNodes.length - 1];
let length = someNode.childNodes.length;

所有 childNodes 中的所有节点都有同一个父元素。它们的 parentNode 属性都指向同一个父元素。因此它们都是同胞节点。childNodes 中可以使用 previousSibling 和 nextSibling 。第一个节点的 perviousSibling 属性为 null，最后一个节点的 nextSibling 也为 null。父节点中的第一个和最后一个子节点都有专属属性：firstChild 和 lastChild 分别指向 childNodes 中的第一个和最后一个子节点。

操纵节点

appendChild() 用于在 childNodes 列表末尾添加节点。添加新节点会更新相关的关系指针，包括父节点和之前的最后一个节点。appendChild() 方法返回新添加的节点。

let returnNode = someNode.appendChild(newNode);
console.log(returnNode == newNode); // true
console.log(someNode.lastChild == newNode); // true

如果把文档中已经存在的节点传递给 appendChild() ,则这个节点会从之前的位置被转移到新位置。

let returnNode = someNode.appendChild(someNode.firstChild);
console.log(returnNode == someNode.firstChild); // false
console.log(returnNode == someNode.lastChild); // true

insertBefore() 方法可以将节点插入到指定节点前面。有两个参数：要插入的节点和参照的节点。倘若传入的参照节点为 null ，则和 appendChild() 效果相同。

// 插入到最后一个子节点与 appendChild() 相同。
let returnNode = someNode.insertBefore(newNode, null);
console.log(returnNode == someNode.lastChild); // true

// 作为第一个子节点插入
returnNode = someNode.insertBefore(newNode, someNode.firstChild);
console.log(returnNode == newNode); // true
console.log(returnNode == someNode.firstNode); // true

// 插入到最后一个子节点前面
returnNode = someNode.insertBefore(newNode, someNode.lastChild);
console.log(returnNode == someNode.childNodes[someNode.childNodes.length - 2]); // true

replaceChild() 方法会替代对应子节点。接收两个参数：要插入的节点和要替换的节点。

// 替换第一个子节点
let returnNode = someNode.replaceChild(newNode, someNode.firstChild);

移除节点，可以使用 removeChild() 方法。接收一个参数：要移除的节点，返回被移除的节点。

// 删除第一个子节点
let formerFirstChild = someNode.removeChild(someNode.firstChild);

复制节点，可以使用 cloneNode() 方法，会返回调用它的节点一模一样的节点。接收一个布尔值参数：表示是否深复制。传入 true 表示会进行深复制。传入 false 则相反。复制之后虽然属于文档所有，但是是一个孤儿节点。所以要通过 appendChild() 、 insertBefor() 或者 replaceChild() 添加到文档中。

操纵文本

文本方法：

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 的文本。

创建文本节点

document.createTextNode() 可以用来创建新文本节点。接收一个参数：要插入节点的文本。

let textNode = document.createTextNode("<strong>小卡车加油！</strong>");

创建完成文本节点后，仍然需要把文本节点添加到文档树中。可使用 appendChild() 、insertBefore() 或者 replaceChild() 。

规范化文本节点

一个文本节点足以表示一个文本字符串，偶尔会出现多个相邻文本节点。可用 normalize() 合并相邻文本节点。

let ele = document.createElement("div");
let textNode1 = document.createTextNode("小卡车");
ele.appendChild(textNode1);
let textNode2 = document.createTextNode("加油！");
ele.appendChild(textNode2);
document.body.appendChild(ele);
console.log(ele.childNodes.length); // 2
// 合并
ele.normalize();
console.log(ele.childNodes.length); // 1
console.log(ele.firstChild.nodeValue); // 小卡车加油！

Element 类型

特征：

nodeType 等于 1；
nodeName 值为元素标签名；
nodeValue 值为 null；
parentNode 值为 Document 或者 Element 对象。

Text 类型

特征：

nodeType 等于 3；
nodeName 值为 “#text”；
nodeValue 值为节点中包含的文本；
parentNode 值为 Element 对象；
不支持子节点。

Comment 类型

特性：

nodeType 等于 8 ；
nodeName 值为 “#comment”；
nodeValue 值为注释的内容；
parentNode 值为 Document 或者 Element 对象；
不支持子节点。

创建注释节点

可用 document.createComment() 创建。

let comment = document.createComment("我是注释");

CDATASection 类型

CDATASection 类型表示 XML 中特有的 CDATA 区块。

特征：

nodeType 等于 4；
nodeName 值为 “#cdata-section”；
nodeValue 值为 CDATA 区块的内容；
parentNode 值为 Document 或者 Element 对象；
不支持子节点。

CDATA 区块只在 XML 文档中有效。

创建 CDATA 区块

let cdata = createCDataSection("Some <CDATA> data ");

Attr 类型

特征：

nodeType 等于 2；
nodeName 值为属性名；
nodeValue 值为属性值；
parentNode 值为 null；
在 HTML 中不支持子节点；
在 XML 中子节点可以是 Text 或者 EntityReference。

属性：

name：属性名。与 nodeName 一样；
value：属性值。与 nodeValue 一样；
specified：布尔值，表示属性使用的是默认值还是被指定的值。

创建属性节点

可用 document.createAttribute() 方法，参数为属性名。

let ele = document.getElementById("xkc");
let attr = document.createAttribute("align");
attr.value = "left";
ele.setAttributeNode(attr);
console.log(ele.attribute["align"].value); // left
console.log(ele.getAttributeNode("align").value); // left
console.log(ele.getAttribute("align")); // left

动态

动态加载脚本

function loadScript(url) {
    let script = document.createElement("script");
    script.src = url;
    document.body.appendChild(script);
}

内嵌脚本

function loadScriptString(code) {
    let script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (e) {
        script.text = code;
    }
    document.body.appendChild(script);
}

动态加载样式文件

function loadStyles(url) {
    let link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    let head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

内嵌样式

function loadStyleString(css) {
    let style = document.createElement("style");
    style.type = "text/css";
    try {
        style.appendChild(document.createTextNode(css));
    } catch (e) {
        style.stylesheet.cssText = css;
    } 
    let head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

DOM 扩展

Selectors API

querySelector()

querySelector() 方法接收 CSS 选择符参数，返回匹配该模式的第一个后代元素，若没匹配返回 null。

// 获得 <body> 元素
let body = document.querySelector("body");
// 获得 id 为 "xkc" 的元素
let xkc = document.querySelector("#xkc");
// 获得类名为 "zzx" 的第一个元素
let zzx = document.querySelector(".zzx");

querySelectorAll()

querySelectorAll() 返回所有匹配的节点。返回的是一个 NodeList 静态实例。

// 获得 id 为 "xkc" 的 div 元素下的所有 li 元素
let lis = document.getElementById("xkc").querySelectorAll("li");
// 获得所有类名为 "zzx" 的元素
let zzxs = document.querySelectorAll(".zzx");

matches()

matches() 方法接收一个 CSS 选择符参数，如果匹配则返回 true，否则返回 false。

<div id="xkc">小卡车加油！</div>
<script type="text/javascript">
    let ele = document.querySelector("#xkc");
	if (ele.matches("#xkc")) {
        console.log("true");
    }
</script>

元素遍历

DOM 元素新增 5 个属性：

childElementCount，返回子元素数量（不包括文本节点和注释）；
firstElementChild，指向第一个 Element 类型的子元素；
lastElementChild，指向最后一个 Element 类型的子元素；
previousElementSibling，指向前一个 Element 类型的同胞元素；
nextElementSibling，指向后一个 Element 类型的同胞元素。

HTML5

CSS 扩展

1.getElementsByClassName()

getElementsByClassName() 接收一个参数：包含一个或多个类名的字符串，返回类名中包含相应类的元素的 NodeList。

// 获得所有类名包含 "xkc", "zzx" 的元素
let getXkcZzx = document.getElementsByClassName("xkc zzx");
// 获得 id 为 "xkc" 的 div 元素中所有的类名为 "zzx" 元素
let getZzx = document.getElementById("xkc").getElementsByClassName("zzx");

2.classList 属性

classList 是一个新的集合类型 DOMTokenList 的实例。有 length 属性表示自己包含多少项，也可以通过 item() 或者中括号取得某个元素。还添加了多个方法：

add(value)，向类名列表中添加指定的字符串值 value。如果这个值存在，则不进行操作；
contains(value)，返回布尔值，表示给定的 value 是否存在；
remove(value)，从类名列表中删除指定的字符串值 value；
toggle(value)，如果类名列表中存在指定的 value，则删除；如果不存在，则添加。

焦点管理

document.activeElement 始终包含当前拥有焦点的 DOM 元素。

let xkcBtn = document.getElementById("xkcBtn");
xkcBtn.focus();
console.log(document.activeElement === xkcBtn); // true

默认情况下，document.activeElement 在页面刚加载完之后会设置为 document.body 。而页面完全加载之前，document.activeElement 的值为 null。

document.hasFocus() 方法，返回布尔值，表示文档是否拥有焦点。

let xkcBtn = document.getElementById("xkcBtn");
xkcBtn.focus();
console.log(document.hasFocus()); // true

HTMLDocument 扩展

1.readyState 属性

document.readyState 属性有两个可能的值：

loading，表示文档正在加载；
complete，表示文档加载完成。

2.compatMode 属性

compatMode 用于检测页面渲染模式。标准模式下， document.compatMode 的值是 “CSS1Compat”，而在混杂模式下， document.compatMode 的值是 “BackCompat”。

if (document.compatMode === "CSS1Compat") {
    console.log("Standards mode");
} else {
    console.log("Quirks mode");
}

3.head 属性

document.head 属性，指向文档中的元素。可直接获取元素。

let head = document.head;

字符集属性

characterSet 属性表示文档实际使用的字符集，可以用来指定新字符集。默认值是 “UTF-16”，但可以通过元素或响应头，以及新增的 characterSeet 属性类修改

console.log(document.characterSet); // "UTF-16"
document.characterSet = "UTF-8";

自定义数据属性

可以给元素指定非标准的属性，但要使用前缀 data- 。

<div id="xkc" data-name="xkc" data-age="20"></div>

定义自定义数据属性之后，可以通过元素的 dataset 属性来访问。dataset 属性是一个 DOMStringMap 的实例，包含一组键值映射。属性 data-myname、data-myName 可以通过 myname 访问，而 data-my-name、data-My-Name 要用 myName 访问。

let xkcDiv = document.getElementById("xkc");
// 获得自定义数据属性
let name = xkcDiv.dataset.name;
let age = xkcDiv.dataset.age;
console.log(name, age); // xkc 20
// 设置自定义数据属性
xkcDiv.dataset.name = "小卡车";
xkcDiv.dataset.age = 20;
let newName = xkcDiv.dataset.name;
let newAge = xkcDiv.dataset.age;
console.log(newName, newAge); // 小卡车 20

插入标记

1.innerHTML 属性

在读取 InnerHTML 属性时，会返回元素所有后代的 HTML 字符串，包括元素、注释和文本节点。而在写入 innerHTML 时，则会根据提供的字符串值以新的 DOM 子树替代元素中原来包含的所有节点。

如果赋值不包含任何 HTML 标签，则直接生成一个文本节点。

let xkcDiv = document.getElementById("xkc");
xkcDiv.innerHTML = "小卡车加油！";
let xkcDiv1 = document.getElementById("xkc1");
xkcDiv1.innerHTML = "<p>小卡车加油！</p>";

2.outerHTML 属性

读取 outerHTML 属性时，会返回调用它的元素（以及所有后代元素）的 HTML 字符串。在写入 outerHTML 属性时，调用它的元素会被传入的 HTML 字符串经解释之后生成的 DOM 子树取代。

let div = document.getElementById("xkcDiv");
div.outerHTML = "<p>小卡车加油！</p>";

与下列代码相同

let div = document.getElementById("xkcDiv");
let p = document.createElement("p");
p.appendChild(document.createTextNode("小卡车加油！"));
div.parentNode.replace(p, div);

3.insertAdjacentHTML() 与 insertAdjacentText()

插入标签，新增两个方法：insertAdjacentHTML() 和 insertAdjacentText() 。接收两个参数：要标记的位置和要插入的 HTML 或文本。

第一个参数：

“beforebegin”，插入当前元素前面，作为前一个同胞节点；
“afterbegin”，插入当前元素内部，作为新的子节点或放在第一个子节点前面；
“beforeend”，插入当前元素内部，作为新的子节点或放在最后一个子节点前面；
“afterbegin”，插入当前元素后面，作为下一个同胞节点。

// 作为前一个同胞节点插入
element.insertAdjacentHTML("beforebegin", "<p>小卡车加油！</p>");
element.insertAdjacentText("beforebegin", "小卡车加油！");
// 作为第一个子节点插入
element.insertAdjacentHTML("afterbegin", "<p>小卡车加油！</p>");
element.insertAdjacentText("afterbegin", "小卡车加油！");
// 作为最后一个子节点插入
element.insertAdjacentHTML("beforeend", "<p>小卡车加油！</p>");
element.insertAdjacentText("beforeend", "小卡车加油！");
// 作为下一个同胞节点插入
element.insertAdjacentHTML("afterend", "<p>小卡车加油！</p>");
element.insertAdjacentText("afterend", "小卡车加油！");

scrollIntoView()

scrollIntoView() 方法存在于所有 HTML 元素上，可以滚动浏览器窗口或容器元素以便包含元素进入视口，参数如下：

alignToTop 是一个布尔值。
- true：窗口滚动后元素的顶部与视口顶部对齐。
- false：窗口滚动后元素的底部与视口底部对齐。
scrollIntoViewOptions 是一个选项对象。
- behavior：定义过渡动画，可取的值为 “smooth” 和 “auto”，默认为 “auto”。
- block：定义垂直方向的对齐，可取的值为 “start” 、“center”、“end” 和 “nearest”，默认值为 “start”。
- inline：定义水平方向的对齐，可取的值为 “start” 、“center”、“end” 和 “nearest”，默认值为 “nearest”。
不传参数等同于 alignToTop 为 true。