其他分享
首页 > 其他分享> > DOM-js红宝书笔记

DOM-js红宝书笔记

作者:互联网

DOM(Document Object Model)文档对象模型是 HTML 和 XML 文档的编程接口。

文章目录

1. 节点层级

<html> 
 <head> 
 <title>Sample Page</title> 
 </head> 
 <body> 
 <p>Hello World!</p> 
 </body> 
</html>

这个例子可以表示为下图的层级结构
在这里插入图片描述
document 节点表示每个文档的根节点

1.1 Node 类型

所有节点类型都继承 Node 类型,节点类型由定义在 Node 类型上的 12 个数值常量表示
节点类型与这些常量比较来确定:

if (someNode.nodeType == Node.ELEMENT_NODE){ 
 alert("Node is an element."); 
}

1.1.1 nodeName 与 nodeValue

if (someNode.nodeType == 1){ 
 value = someNode.nodeName; // 会显示元素的标签名
}

nodeName 始终等于元素的标签名,而 nodeValue 则始终为 null

1.1.2 节点关系

文档中的所有节点都与其他节点有关系,可以将其形容成家族关系。
每个节点都有一个 childNodes 属性,其中包含一个 NodeList 的实例。
NodeList是一个类数组对象,特点:它是一个实时的活动对象。

将NodeList转换为数组:

let arrayOfNodes = Array.from(someNode.childNodes);

1.1.3 操纵节点

1.1.4 其他方法

cloneNode()方法
用法:复制节点
返回值:返回一个节点
1个参数:为true时深拷贝,为false时,只拷贝当前节点,不拷贝它的子节点
例子:

let deepList = myList.cloneNode(true); 
alert(deepList.childNodes.length); // 3(IE9 之前的版本)或 7(其他浏览器)
let shallowList = myList.cloneNode(false); 
alert(shallowList.childNodes.length); // 0

2. Document 类型

文档对象 document 是HTMLDocument 的实例

1.2.1 文档子节点

let html = document.documentElement; // 取得对<html>的引用
alert(html === document.childNodes[0]); // true 
alert(html === document.firstChild); // true
let body = document.body; // 取得对<body>的引用

1.2.2 文档信息

title属性

// 读取文档标题
let originalTitle = document.title; 
// 修改文档标题
document.title = "New page title";

3 个属性 URL、domain 和 referrer

// 取得完整的 URL 
let url = document.URL; 
// 取得域名
let domain = document.domain; 
// 取得来源
let referrer = document.referrer;

1.2.3 定位元素

<img src="myimage.gif" name="myImage">
let myImage = images.namedItem("myImage");
let myImage = images["myImage"];

给 getElementsByTagName()传入*,返回所有元素的对象

let allElements = document.getElementsByTagName("*");

第一项是元素,第二项是元素,以此类推

1.2.4 特殊集合

1.2.5 文档写入

4 个方法:write()、writeln()、open()和 close()

<html> 
<head> 
 <title>document.write() Example</title> 
</head> 
<body> 
 <p>The current date and time is: 
 <script type="text/javascript"> 
 document.write("<strong>" + (new Date()).toString() + "</strong>"); 
 </script> 
</p> 
</body> 
</html>

1.3 Element 类型

可以通过 nodeNametagName 属性来获取元素的标签名
注意:元素标签名始终以全大写表示;

<div id="myDiv"></div>
let div = document.getElementById("myDiv"); 
alert(div.tagName); // "DIV" 
alert(div.tagName == div.nodeName); // true

1.3.1 HTML 元素

这个元素中的所有属性都可以使用下列 JavaScript 代码读取:

let div = document.getElementById("myDiv"); 
alert(div.id); // "myDiv" 
alert(div.className); // "bd" 
alert(div.title); // "Body text" 
alert(div.lang); // "en" 
alert(div.dir); // "ltr"

1.3.2 取得属性

DOM 方法主要有 3 个:getAttribute()、setAttribute()和 removeAttribute()
可以操纵属性

let div = document.getElementById("myDiv"); 
alert(div.getAttribute("id")); // "myDiv" 
alert(div.getAttribute("class")); // "bd" 
alert(div.getAttribute("title")); // "Body text" 
alert(div.getAttribute("lang")); // "en" 
alert(div.getAttribute("dir")); // "ltr"

如果给定的属性不存在,则 getAttribute()返回 null。

1.3.3 设置属性

接收两个参数:要设置的属性名和属性的值。

div.setAttribute("id", "someOtherId"); 
div.setAttribute("class", "ft"); 
div.setAttribute("title", "Some other text"); 
div.setAttribute("lang","fr"); 
div.setAttribute("dir", "rtl");

removeAttribute()方法
用于从元素中删除属性

1.3.4 attributes 属性

attributes 属性包含一个NamedNodeMap 实例,是一个类似 NodeList 的“实时”集合。

取得元素 id 属性的值:

let id = element.attributes.getNamedItem("id").nodeValue;

简写:

let id = element.attributes["id"].nodeValue;

通常开发者更喜欢使用 getAttribute()、removeAttribute()和 setAttribute()方法。
但是迭代一个元素上的所有属性很方便:

function outputAttributes(element) { 
 let pairs = []; 
 for (let i = 0, len = element.attributes.length; i < len; ++i) { 
 const attribute = element.attributes[i]; 
 pairs.push(`${attribute.nodeName}="${attribute.nodeValue}"`); 
 } 
 return pairs.join(" "); 
}

1.3.5 创建元素

document.createElement()方法创建新元素.
接收一个参数,即要创建元素的标签名

let div = document.createElement("div");

元素被添加到文档树之后,浏览器会立即将其渲染出来

document.body.appendChild(div);

1.3.6 元素后代

遍历某个元素的子节点:

for (let i = 0, len = element.childNodes.length; i < len; ++i) { 
 if (element.childNodes[i].nodeType == 1) { 
 // 执行某个操作
 } 
}

标签:DOM,元素,js,红宝书,let,div,document,节点,属性
来源: https://blog.csdn.net/laoxiaohang/article/details/113526793