打开一个要写入的文档。
这将会有一些连带的影响。例如:
document.open();
document.write()
在页面加载后调用,会发生自动的 document.open()
调用。window.open()
方法混淆。document.open
可用于重写当前的文档内容或者追加内容,而 window.open
是提供了打开一个新的窗口的方法,当前的网页文档内容给你会被保留。由于 Window 是一个全局对象,直接调用 open(...)
和 window.open(...)
的效果是一样的。将一个文本字符串写入一个由 document.open()
打开的文档流。
📖 语法:
document.write(maskup);
参数 maskup
为一个包含要写入文档的文本的字符串。
对文档的写入操作主要通过 document.write()
方法。该方法主要用在两方面:
只有当页面被加载的时候
document.write()
函数才会被执行
⚠️ 注意:
document.write()
需要向文档流中写入内容,所以,若在一个已关闭(例如,已完成加载)的文档上调用 document.write()
,就会自动调用 document.open()
,浙江清空该文档的内容。deferred
或 asynchronous
属性的 <script>
中,document.write()
会被忽略,控制台会显示 “A call to document.write()
from an asynchronously-loaded external script was ignored” 的报错信息向当前文档写入内容,尾部添加换行符
用于结束对文档的写入操作,这种写入操作一般由 document.open()
打开。
// 打开一个文档,以便写入数据document.open();// 写入文档内容document.write();// 关闭文档document.close();
表明当前文档或者当前文档内的节点是否获得了焦点,该方法可用来判断当前文档中的活动元素是否获得了焦点。
const focused = document.hasFocus();
🌰 示例:检测页面是否获得焦点
function checkPageFocus() {const info = document.getElementById('message');if (document.hasFocus()) {info.innerHTML = '该页面获得了焦点';} else {info.innerHTML = '该页面没有获得焦点';}}
通过 document.elementFromPoint(x, y)
根据横纵坐标获取目标元素对象,该元素对象必须支持和响应鼠标事件。
获取文档中位于页面指定位置最上层的子元素节点。这个方法可以用于检测元素是否发生重叠或碰撞。
参数:
x
:(必填项)定位横坐标偏移量,指 clientX
y
:(必填项)定位纵坐标偏移量,指 clientY
返回值为指定坐标上的元素数组(顺序以时间冒泡为依据)
🌰 示例:检测元素可见性
const isElementVisible = function(elem) {const win = window, doc = document, height, rects;if (!elem || (elem && elem.nodeType !== 1) || !elem.getClientRects || !doc.elementFromPoint || !doc.querySelector || !elem.contains) {return false;}if (elem.offsetWidth === 0 || elem.offsetHeight === 0) {return false;}height = win.innerHeight ? win.innerHeight : doc.documentElement.clientHeight;rects.elem.getClientRects();const offsetTop = function (r, elem) {const x = (r.left + r.right) / 2,y = (r.top + r.bottom) / 2,elemFromPoint = doc.elementFromPoint(x, y);return (elemFromPoint === elem || elem.contains(elemFromPoint));}for (let i = 0; len = rects.length; i < len; i++) {let item = rects[i],inViewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);if (inViewport && offsetTop(r, elem)) {return true;}}return false;}
将某个节点,从其原来所在的文档移除,插入当前文档,并返回插入后的新节点。
document.adoptNode(externalNode);
该方法不但可以从
iframe
中获取adopt
元素,在同一 document 文档下的不同两个元素中也可以使用,该方法可以实现从左边栏列表中选取某些元素加载到右边栏的功能。
从外部文档拷贝指定节点,插入当前文档
document.importNode(externalNode, deep);
大多数客户端 JavaScript 程序运行时总是在操作一个或多个文档元素。当这些程序启动时,可以使用 JavaScript 全局变量 document
来引用 Document 对象。但是,为了操作文档中的元素,必须通过某种方式获得或选取这些引用文档元素的 Element 对象。DOM 提供了多个 API 以供开发者访问文档树中的元素:
id
属性获取单个节点:getElementById
name
属性获取节点列表:getElementsByNames
getElementByTagName
class
属性获取元素列表:getElementsByClassName
querySelector
querySelectorAll
document.getElementById()
方法通过指定 HTML 元素的 id 属性获取元素引用。
<div id="app"></div><script type="text/javascript">const elem = document.getElementById('app');console.log(elem);// <div id="app"></div></script>
id
:根据元素的 id 属性获取元素引用(大小写敏感)document.getElementById()
只能在 document
对象上调用,它在整个文档中查找给定的 id 属性。getElementsByName()
方法通过指定 HTML 元素 name
属性获取元素引用的集合。
<div><div name="app"></div><div name="app"></div></div><script type="text/javascript">const elemList = document.getElementsByName('app');console.log(elemList);// NodeList(3) [div, div]</script>
name
:根据元素的 name
属性获取元素引用getElementsByName()
方法返回的是 元素的数组(NodeList),而不是一个元素。name
属性,比如 <div>
是没有 name
属性的,但是如果强制设置 <div>
的 name
属性,它也是可以被查找到的。id
设置成某个值,然后传入 getElementsByName()
的参数值和 id
值一样,则这个元素是会被找到的,所以最好不好设置同样的值给 id
和 name
getElementsByTagName()
方法通过指定 HTML 元素标签名获取元素引用的集合。
<ul><li>1</li><li>2</li><li>3</li></ul><script type="text/javascript">const elemList = document.getElementsByTagName('li');console.log(elemList);// HTMLCollection(3) [li, li, li]</script>
namedItem()
方法,可以通过元素的 name
属性取得集合中的第一个值。Safari 和 IE 不支持该方法getElementsByTagName()
方法可以用于 Document 对象,也可以用于 Element 元素对象,用于调用该方法的元素的 后代元素HTMLCollection
集合进行循环操作,最好将其长度缓存起来,因为每次循环都会去计算长度,暂时缓存起来可以提高效率null
,而是一个空的 HTMLCollection
匹配所有标签
使用通配符 *
。
const all = document.getElementsByTagName('*');
getElementsByClassName()
方法通过指定 HTML 子元素的类名获取元素引用的集合。
<div class="app"></div><script type="text/javascript">const elemList = document.getElementByClassName('app');console.log(elemList);// HTMLCollection(1) [div.app]</script>
className
:根据元素类名获取元素引用elementList
:返回值为匹配类名的元素集合className
,可传入多个className
,每个用空格分隔querySelector()
方法返回文档中匹配指定 CSS 选择器的第一个元素。
<div><div id="foo"></div><div class="bar"></div></div><script type="text/javascript">const foo = document.querySelector('#foo');console.log(foo);// <div id="foo"></div>const bar = document.querySelector('.bar');console.log(bar);// <div class="bar"></div>const div = document.querySelector('div');// <div>// <div id="foo"></div>// <div class="bar"></div>// </div></script>
selectors
必须是有效的 CSS 选择器字符串;如果不是,则引发 SYNTAX_ERR
异常。null
。🌰 示例:
// ID 为 foo 的元素const foo = document.querySelector('.foo');// 类名为 bar 的元素const bar = document.querySelector('.bar');
querySelectorAll()
方法返回与指定的选择器组匹配的文档中的元素列表(使用 深度优先 的先序遍历文档的节点)。
<div><div class="app"></div><div class="app"></div></div><script type="text/javascript">const elemList = document.querySelectorAll('.app');console.log(elemList);// NodeList(2) [div.app, div.app]</script>
null
document.createElement
document.createAttribute
document.setAttribute
document.createTextNode
document.createComment
document.createDocumentFragment
通过 document.createElement
创建由 tagName 指定的 HTML 元素,或一个 HTMLUnkownElement。
document.createElement(tagName [, options])
当执行此方法后,该元素并未显示在 HTML 文档中,需要将该元素添加到 DOM 树中:
appendChild()
方法,并将您想要的元素添加到指定的元素中🌰 示例:
<body><h1 id="theTitle" class="hightlight summer">What's happening?</h1></body>
let newElement = document.createElement('p');newElement.textContent = '新创建的p元素';document.body.appendChild(newElement);
创建新的属性节点,这种创建方式下 DOM 不限制节点能够添加的属性种类。
document.createAttribute(name);
参数 name
是属性的属性名
🌰 示例:
const node = document.getElementById('node');const att = document.createAttribute('name');att.value = 'newValue';node.setAttribute(att);console.log(node.getAttribute('name'));// newValue
创建一个新的空白的文档片段 DocumentFragments。
DocumentFragments 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到 DOM 树。在 DOM 树中,文档片段被其所有的子元素所代替。
因为文档片段存在于内存中,并不在 DOM 树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。
🌰 示例:
<ul id="list"></ul><script type="text/javascript">const list = document.getElementById('ul');const fragment = document.createDocumentFragment();const browsers = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'];browsers.forEach(function (browser) {const li = document.createElement('li');li.textContent = browser;fragment.appendChild(li);});list.appendChild(fragment);</script>
在 DOM 中获取元素(或节点)的五种常用的方法:
方法 | 参数 | 是否调用一个元素 | 是否动态 |
---|---|---|---|
document.getElementById | id | ||
document.getElementByName | name | ✔ | |
document.getElmentByTagName | tag 或 * | ✔ | ✔ |
document.getElmentByClassName | className | ✔ | ✔ |
document.querySelector | CSS Selector | ✔ | |
document.querySelectorAll | CSS Selector | ✔ |
除 getElementById
和 getElementByName
,其它方法均可以在指定元素上搜索指定的选择器。
除此之外:
elem.matches(css)
用于检查 elem
是否匹配指定的 CSS 选择器elem.closet(css)
用于查找匹配给定的 CSS 选择器的最近的组件级elemA.contains(elemB)
表示的是如果 elemB
是否包含 elemA
,如果包含就返回 true
参考资料: