DOM之Document及Element公有方法与属性思维导图
Dom-Document-Element.png
DOM之Document公有属性
document.documentElement
返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素，及<html></html>标签包含的的部分
<html>
<head>
</head>
<body>
<p class="test">测试一</p>
</body>
</html>
document.documentElement
// 返回整个<html></html>包含的的部分
/*
<html>
<head>
</head>
<body>
<p class="test">测试一</p>
</body>
</html>
*/
document.domain
document.domain属性返回当前文档的域名，不包含协议和端口
示例🌰
document.domain
// "www.baidu.com"
document.readyState
| 阶段 | - |
|---|---|
| loading | document 仍在加载。 |
| interactive | 文档已被解析，"正在加载"状态结束 |
| complete | 加载完成 |
为了测试，加载的三个过程可以把，控制台的网络NetWork改成「slow 3G」,给HTML文档多添加几个img
document.referrer
用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。由于该属性只是返回一个字符串，所以不能够通过该属性引用页面的 DOM。
「document.referrer的值」，为打开另一个页面作为引荐，即打开另一个页面的方式必须是在「指定的页面」通过点击链接跳转。而不是通过直接在地址栏输入需被打开地址(这样也不能打开)
document.referrer实例🌰🌰🌰
- https://www.baidu.com(百度首页)打开百度新闻
document.referrer实例
头部信息的「referer」与「document.referrer」,前者少一个 r 字母，但是所取得的值是相同的
ps: 部分网站做了强制规定了『document.referrer的值』，其他方式打开会报错。
DOM之Document公有方法
document.open() document.close()与 document.write()
无特殊情况，尽量避免使用document.write()，可能会一不小心把整个Document文档都清除
『document.open』方法用于新建一个文档，供『write』方法写入内容。它实际上等于清除当前文档，重新写入内容
『document.close()』方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。
『document.write()』方法用于向当前文档写入内容。只要当前文档还没有用close方法关闭，一直使用document.write('xxx')它所写入的内容就会追加在已有内容的后面。
document.open();
document.write("hello");
document.write("world");
document.close();
document.write('test again')
// 会在页面，显示『hrllo world』
// document.close(),再调用document.write('test again'),擦除除之前写入的内容，显示『'test again'』
如果页面已经渲染完成再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入。
如果在页面渲染过程中调用write方法，并不会调用open方法。
document.open() document.close document.write()
document.createDocumentfragment()
document.createDocumentfragment() 生成一个DocumentFragment对象，是一个存在于内存的DOM片段，但是不属于当前文档。DocumentFragment不属于当前的文档，对它的任何改动，都不会引发当前页面的重新渲染，比直接修改当前文档的DOM有更好的性能表现
实例🌰document.createDocumentfragment()-codePen
<ul id="test"></ul>
<script>
// 生成一个DocumentFragment,为五个<li>
// 把生成的DocumentFragment，使用appendChild()方法，插入到<ul>
var Ul = document.querySelector('#test')
var fragment = document.createDocumentFragment()
for (var i = 0; i < 5; i++) {
var child = document.createElement('li')
var childTextContent = document.createTextNode('No :'+ (1 + i))
child.appendChild(childTextContent)
fragment.appendChild(child)
Ul.appendChild(fragment)
}
</script>
document.createDocumentfragment()
document.getSelection()
返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
document.getSelection() 等效于 Window.getSelection()
var sele = document.getSelection()
// 获取被光标选中的部分
var string = sele + '' // 转化为字符串①
var string = sele.toString() // 转化为字符串②
String(document.getSelection()) // 转化为字符串③
// 可以上方式①②把选中部分，转化为字符串
document.getSelection()
配图存于语雀
版权声明：本文为博主原创文章，未经博主许可不得转载
网友评论