工具站工具站
Bing
◆

JavaScript document 对象与 DOM 操作 API 详解

2021-02-02 01:370

示例

// Document.createAttribute()方法创建并返回一个新的属性节点。
// 这个对象创建一个实现了 Attr 接口的节点。这个方式下DOM不限制节点能够添加的属性种类。
var node = document.getElementById('testOne');
var a = document.createAttribute('my_attrib');
// a.value = "newVal";
a.nodeValue = 'newValTwo';
node.setAttributeNode(a);
console.log(node.getAttribute('my_attrib')); // "newVal"
// Document.createTextNode() 创建一个新的文本节点。这个方法可以用来转义 HTML 字符。
var newTextNode = document.createTextNode('郁闷');
var newElement = document.createElement('p');
newElement.appendChild(newTextNode);
document.body.appendChild(newElement);

// 返回一个包含了所有指定类名的子元素的类数组对象。HTMLCollection
var byClassName = document.getElementsByClassName('cOne');
// 返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection
var byTagName = document.getElementsByTagName('div');
// 返回一个匹配到 ID 的 DOM Element 对象
var byId = document.getElementById('testOne');
// 返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。 如果找不到匹配项，则返回null
var querySelector = document.querySelector('div');
// 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
var querySelectorAll = document.querySelectorAll('div');
// 返回一个live的 NodeList   集合，这个集合包含 name 属性为指定值的所有元素，例如<meta> 、<object>，
// 甚至那些不支持 name 属性但是添加了 name 自定义属性的元素也包含其中。
// getElementsByName  在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName()  方法还会返回那些 id 为指定值的元素。所以你要小心使用该方法，最好不要为元素的 name 和 id 赋予相同的值。
// IE 和 Edge 都返回一个 HTMLCollection, 而不是NodeList 。
var getElementsByName = document.getElementsByName('twoName');

Document.getElementById

  • 返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。
  • 不同于其他 Element 查找方法（如 Document.querySelector() 以及 Document.querySelectorAll()），getElementById() 只有在作为 document 的方法时才能起作用，而在 DOM 中的其他元素下无法生效。

Document.createAttribute

  • 创建并返回一个新的属性节点
  • 语法：attribute = document.createAttribute(name)
  • 参数 name：属性的属性名。 返回值：一个 Attr 节点。
  • 可以通过为该节点的 nodeValue 属性赋值来设置该属性节点的属性值，也可以使用常用的 setAttribute() 方法来替代该方法

Document.createElement()

  • 用于创建一个由标签名称 tagName 指定的 HTML 元素。 返回值： 新建的元素（Element）。

Document.getElementsByClassName()/getElementsByTagName()

  • 返回一个包含了所有指定类名的子元素的类数组对象。
  • 当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点。你也可以在任意元素上调用 getElementsByClassName() 方
  • elements 是一个实时集合(HTMLCollection)，包含了找到的所有元素。

Document.querySelector()

  • 返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement 对象。 如果找不到匹配项，则返回 null
  • 示例
<!--这里, 一个 class 属性为"user-panel main"的div元素 内包含一个name属性为"login"的input元素 -->
<div class="user-panel main">
  <input name="login" />
</div>

var el = document.querySelector("div.user-panel.main input[name='login']");

Document.querySelectorAll

  • 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。
  • 返回的对象是 NodeList 。

DocumentFragment

  • 文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。
  • 与 document 相比，最大的区别是 DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。
  • 最常用的方法是使用文档片段作为参数（例如，任何 Node 接口类似 Node.appendChild 和 Node.insertBefore 的方法）， 这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点, 而非片段本身。 因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。

Document.createDocumentFragment()

  • 创建一个新的空白的文档片段(DocumentFragment)。
  • DocumentFragments 是 DOM 节点。它们不是主 DOM 树的一部分。
  • 通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。
  • 因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。
// Document.createDocumentFragment()
var element = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'];
browsers.forEach(function (browser) {
  var li = document.createElement('li');
  li.textContent = browser;
  fragment.appendChild(li);
});
element.appendChild(fragment);

other

// 返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）
console.log('documentElement：', document.documentElement);

// 返回当前文档中的<body>元素或者<frameset>元素.
console.log('body：', document.body);

// 返回当前文档中的 <head> 元素。如果有多个 <head> 元素，则返回第一个。
console.log('head：', document.head);

// 获取或设置文档的标题。浏览器 tab 标题
console.log('title：', document.title);

// 根据当前文档的 MIME Header，返回它的 Content-Type。
console.log('contentType：', document.contentType);

// 文档正在使用的字符集
console.log('characterSet：', document.characterSet);

// 以字符串的类型，返回当前文档的 url。
console.log('documentURI：', document.documentURI);
console.log('URL：', document.URL);

// 返回当前文档的 URI。 返回的类型是 object 等同于 window.location
console.log('location：', document.location);
// false
console.log(document.URL === document.location);
// true
console.log(document.URL === document.documentURI);
// true
console.log(document.URL == document.location);
// true
console.log(window.location === document.location);

// 返回当前文档中所包含的图片的列表。 HTMLCollection
console.log('images：', document.images);

// 返回一个包含文档中所有超链接的列表。 HTMLCollection
console.log('links：', document.links);

// 返回文档中所有的 <script> 元素。 HTMLCollection
console.log('scripts：', document.scripts);

// 返回文档上可用样式表的列表。 StyleSheetList
console.log('styleSheets：', document.styleSheets);

// 返回一个使用分号分隔的 cookie 列表，或设置（写入）一个 cookie。
console.log('cookie:', document.cookie);

// 获取或设置当前文档的域名。
console.log('domain:', document.domain);

// 返回当前文档的 URI。
console.log('location:', document.location);

// 返回 一个 Node 的子 elements，是一个动态更新的 HTMLCollection
console.log('document.children:', document.children);

// 返回 一个 Node 的子 elements，是一个动态更新的 HTMLCollection
console.log('document.body.children:', document.body.children);

// 表示给定元素的子元素数。
console.log('document.body.childElementCount', document.body.childElementCount);

// 返回来源页面的 URI。
console.log(document.referrer);
💬留言板0

还没有留言，来发表第一条吧～

PAGE LOAD / LIVEJavaScript document 对象与 DOM 操作 API 详解加载中
全屏