DOM(二)：Document属性与方法-CFANZ编程社区

DOM之Document及Element公有方法与属性思维导图

DOM之Document公有属性

document.documentElement

<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

示例?

百度首页 https://www.baidu.com

document.domain
// "www.baidu.com"

document.readyState

阶段	-
loading	document 仍在加载。
interactive	文档已被解析，"正在加载"状态结束
complete	加载完成

document.referrer

「document.referrer的值」，为打开另一个页面作为引荐，即打开另一个页面的方式必须是在「指定的页面」通过点击链接跳转。而不是通过直接在地址栏输入需被打开地址(这样也不能打开)

document.referrer实例???

https://www.baidu.com(百度首页)打开百度新闻

ps: 部分网站做了强制规定了『document.referrer的值』，其他方式打开会报错。

DOM之Document公有方法

document.open() document.close()与 document.write()

『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.createDocumentfragment()

实例?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.getSelection()

document.getSelection() 等效于 Window.getSelection()

var sele = document.getSelection()
// 获取被光标选中的部分

var string = sele + ''           // 转化为字符串①
var string = sele.toString()     // 转化为字符串②
String(document.getSelection())  // 转化为字符串③
  
// 可以上方式①②把选中部分，转化为字符串

配图存于语雀