灏天阁

window.document 对象实例

· Yin灏

返回焦点所在的元素

document.activeElement 可返回当前焦点所在元素实例。

<form id="form01" name="form01" style="text-align: center;">
  <h3>个人资料</h3>
  <input type="text" id="username" name="username" placeholder="username" size="16" required>
  <input type="text" id="password" name="password" placeholder="password" size="16" required>
  <p></p>
  <select id="select01" name="select01">
     <option value="">choice of day-off</option>
     <option value="0">0</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
  </select>
  <p></p>
  <button type="submit" id="Login_btn">Login</button>
  <button type="reset" id="reset_btn">Reset</button>
</form>

form01.onclick = function(event) {
  with(document.activeElement) {
    console.log(`Tag name = ${tagName}, id = ${id}`);
  }
}

/*
  Tag name = BUTTON, id = Login_btn
  Tag name = BUTTON, id = reset_btn
  Tag name = INPUT, id = password
  Tag name = INPUT, id = username
*/

附加事件处理至特定元素

function display(evnet) {
  with(document.activeElement) {
    console.log(`Tag name = ${tagName}, id = ${id}`);
  }
}

// 这两句等价：capture:true 或 true 都是捕获
// form01.addEventListener('click', display, true);
form01.addEventListener('click', display, {capture: true});

function warning(evnet) {
  console.log('username field is clicked.');
}

// 第三个参数默认是 false
username.addEventListener('click', warning);

function only_once_message(event) {
  console.log('Password field is clicked.');
}

// 监听事件只处理一次，只触发一次
password.addEventListener('click', only_once_message, {once: true});

收养特定节点

通过函数 document.adpotNode() 使得在当前网页中，特定节点实例会被收养到其他节点实例中，或代表子网页的 iframe 元素实例里的节点实例中。

点击 ul01 中的 li，对应的元素 li 会被添加到 ul02 中。

<ul id="ul01">
   <li>apple</li>
   <li>blueberry</li>
   <li>cherry</li>
   <li>durian</li>
   <li>grape</li>
</ul>
<ul id="ul02">
   <li>banana</li>
</ul>

[id^=ul] {
  border-radius: 5px;
  color: RoyalBlue;
  width: 10px;
  text-align: center;
  padding: 5px;
  list-style-type: none;
  background-color: Gold;
  margin: 20px;
  display: inline-block;
}

#ul02 {
  background-color: GreenYellow;
}

let temp = null;
function select_item(event) {
  temp = document.adoptNode(event.target);
  ul02.appendChild(temp);
}

ul01.addEventListener('click', select_item);

返回所有锚点元素构成的集合

<a href="#a01">To a01</a>
<a href="#a02">To a02</a>
<a href="#a03">To a03</a>
<a href="#a04">To a04</a>
<a href="#a05">To a05</a>
<p></p>

<a name="a01">a01</a>
<div id="div01">...</div>

<a name="a02">a02</a>
<div id="div02">...</div>

<a name="a03">a03</a>
<div id="div03">...</div>

<a name="a04">a04</a>
<div id="div04">...</div>

<a name="a05">a05</a>
<div id="div05">...</div>

[id^=div] {
  display: block;
  height: 500px;
}

#div01 {
  background-color: Gold;
}

#div02 {
  background-color: GreenYellow;
}

#div03 {
  background-color: YellowGreen;
}

#div04 {
  background-color: RoyalBlue;
}

#div05 {
  background-color: Chocolate;
}

let anchors = document.anchors;
console.log(anchors);

返回当前网址的相关属性

以下的几个属性都能返回当前的网址 url。

// 这三个是只读属性，返回当前页面的路径或网址
console.log(document.documentURI); // https://www.easygetinsta.com/
console.log(document.baseURI); // https://www.easygetinsta.com/
console.log(document.URL); // https://www.easygetinsta.com/
// 这个属性是可读可写属性，返回当前页面的路径或网址
console.log(location.href);  // https://www.easygetinsta.com/

在当前网页中动态生成 HTML 源代码

document.open() // 开启一个输出流

document.writeln('<hr color="Green">')

document.write('<br>')

document.write('<div align="center">Time is money.</div>')

document.write('<br>')

document.writeln('<hr color="Green">')

document.close() // 关闭输出流

document.body.innerHTML += '<h1 style="color: RoyalBlue;text-align: center">World Peace...</h1>'

console.log(document.body);

cookie 是网站服务器借助客户端浏览器，存储于客户端的相关数据的小型文档，以便加速客户端日后和网站服务器的链接。

console.log(document.cookie);
console.log('\n');

let future_date = new Date();
// 获取当前时间并往后推一个小时
future_date.setTime(future_date.getTime() + 1 * 60 * 60 * 1000);

document.cookie = 'username=jasper337';
document.cookie = 'ip_address=111.222.333.444' + ';expires=' + future_date.toUTCString();

// 清空 cookie
document.cookie = 'username=;expires=Thu, 01 Jan 1970 00:00:00 GMT';
document.cookie = 'ip_address=;expires=Thu, 01 Jan 1970 00:00:00 GMT';

console.log(document.cookie);

返回当前网页编码字符集的名称

console.log(document.characterSet); // 'UTF-8'

创建代表新属性的节点

通过 document.createAttribute() 可创建并返回的节点实例。

let e01 = document.createElement('div');

e01.id = 'div01';
e01.innerHTML = 'A person who never made a mistake never tried anything new.';

e01.style.color = 'Gold';
e01.style.backgroundColor = 'RoyalBule';

let a01 = document.createAttribute('title');
a01.value = 'word count = 11';

e01.setAttributeNode(a01);

document.body.appendChild(e01);

创建代表新注释的节点

通过函数 document.createComment()，可创建代表新注释的节点实例。

let c01 = document.createComment('This is the body for the main content.');
document.body.appendChild(c01);  // <!--This is the body for the main content.-->

创建代表新片段或新元素的节点

通过函数 document.createDocumentFragment() 可创建（随后可再被新增其他子节点）的片段的节点实例。

let e01 = document.createElement('select');
let e02 = null;

e01.style.fontSize = '1.2em';
e01.style.marginTop = '10px';

let fruits = ['apple', 'banana', 'cherry', 'durian', 'guava'];

// 创建代码片段
let f01 = document.createDocumentFragment();

for (let i = 0; i < fruits.length; i++) {
    e02 = document.createElement('option');
    e02.value = fruits[i];
    //  e02.innerHTML = fruits[i];
    e02.textContent = fruits[i];
    f01.appendChild(e02);
}

e01.appendChild(f01);

document.body.appendChild(e01);

创建代表新文本的节点

通过函数 document.createTextNode() 可创建代表新文本的节点实例。

let e01 = document.createElement('div');

e01.id = 'div01';

let t01 = document.createTextNode('A person who never made a mistake never tried anything new.');

e01.appendChild(t01);

e01.style.color = 'Gold';

e01.style.backgroundColor = 'RoyalBule';

let a01 = document.createAttribute('title');

a01.value = 'word count = 1';

e01.setAttributeNode(a01);

document.body.appendChild(e01);

返回当前网页的根元素

通过属性 document.documentElement 可返回当前网页的根元素（root）实例

let root = document.documentElement;

let children = root.children;

console.log(children); // [head, body]

children[1].style.backgroundColor = 'GreenYellow';

console.log(children[1]); // <body>

访问当前网址的域名

通过属性 document.domain 可以返回或者动态变更当前网页所在网站服务器的域名

console.log(document.domain)

// document.domain = 'local.com'

返回所有 embed 元素构成的集合

通过属性 document.embeds 可以返回当前网页中的所有 embed 元素实例构成的集合。

<embed src="./img/pic01.png" width="150" height="100"></embed>
<embed src="./img/pic01.png" width="150" height="100"></embed>
<embed src="./img/pic01.png" width="150" height="100"></embed>
<embed src="./img/pic01.png" width="150" height="100"></embed>

let embeds = document.embeds;
console.log(embeds);
console.log(embeds.length);
console.log(embeds[1].src);

返回所有 form 元素实例构成的集合

通过属性 document.forms 可以返回当前网页中的所有 form 元素实例构成的集合。

let forms = document.forms;

console.log(forms);

console.log(forms[0].id); // form01

console.log(forms[0].elements[0].id); // username

forms[0].elements[0].style.backgroundColor = 'Gold';

判断当前网页是否存在焦点

  • 通过属性 document.hasFocus() 可以判断焦点是否已经进入网页
  • 单击网页内的任何位置，都可以使网页获得焦点
setInterval(check_focus, 500);

function check_focus() {
  let focused = document.hasFocus();
  if(focused) {
    document.body.style.backgroundColor = 'GreenYellow';
  } else {
    document.body.style.backgroundColor = 'Pink';
  }
}

返回当前网页的 head 元素实例

通过属性 document.head 可以返回当前网页的 head 元素实例

console.log(document.head);

let title = document.head.getElementsByTagName('title')[0];

title.innerHTML = title.innerHTML.toUpperCase(); // 处理 <title></title> 元素

返回当前网页所有 image 元素实例的集合

通过属性 document.images 可以返回当前网页的 image 元素实例

console.log(document.images);

创建当前网页或者子网页里的特定节点实例副本

通过属性 document.importNpde() 或 特定元素实例的 id 衔接函数（.cloneNode()）的调用，可在当前网页或 iframe 元素实例中的子网页里，创建特定节点实例的副本。

let ref = null;
// true 表示一起复制其内部的子元素
// 制作一个 div01 的 DOM 副本
ref = document.importNode(div01, true);

console.log(ref);

ref.id = 'div02';

ref.getElementsByTagName('img')[0].src = './img/pic02.png';
ref.getElementsByTagName('span')[0].innerHTML = 'Flowers and this beer';

document.body.appendChild(ref);

/**
 * 通过属性 document.cloneNode()
 */
// true 返回包含所有子元素实例在内的副本
let element = div01.cloneNode(true);

element.id = 'div02';

element.innerHTML = '<p>Nice</p>';

element.innerHTML += '<a href="#">anazing hour</a>';

document.body.appendChild(element);

获取当前网页的最近被修改的日期和时间

/**
 * 通过属性 document.lastModified() 返回当前网页的最近被修改的日期与时间。
 */

console.log(document.lastModified);

console.log('\n'); // 07/06/2021 13:23:42

let mdate = new Date(document.lastModified);

console.log(mdate); // Tue Jul 06 2021 13:23:42 GMT+0800 (中国标准时间)

console.log(mdate.getFullYear());
console.log(mdate.getMonth() + 1);
console.log(mdate.getDate());

console.log(mdate.getDay()); // 星期二

console.log(mdate.getHours());
console.log(mdate.getMinutes());
console.log(mdate.getSeconds());

返回当前网页中的所有超链接元素实例的集合

/**
 * 通过属性 document.links() 返回当前网页中的所有超链接元素实例构成的集合。
 * 其中，带有属性 href 及其数据的 a 元素实例与 area 元素实例，均被视为超链接元素实例。
 */

let refs = document.links;

console.log(refs);

for(let i = 0; i < refs.length; i++) {
   // 0xffffff 16进制，转化为 10进制为 16777215
   refs[i].style.color = '#' + parseInt(0xffffff * Math.random()).toString(16).padStart(6, '0');
}

返回和处置当前网页的加载状态

  1. 网页加载中（loading）
  2. 子资源（图片、框架源码、样式资源等）加载中（interactive）
  3. 加载完成（complete）
/**
 * 通过属性 document.readState() 返回当前网页的加载（loading）/ 就绪（ready）状态；通过属性 document.onreadystatechange 可设置一旦网页的就绪状态发生任何变化时，就调用的函数
 */

//console.log(document.readyState); // 'loading'

document.onreadystatechange = function(event) {
  switch(document.readyState) {
    case 'loading':
       console.log('The document is being loaded.\n\n');
    break;

    case 'interactive':
       console.log('The DOM is ready to be sccessed.\n\n');
    break;

    case 'complete':
       console.log('The document has been completely loaded.\n\n');
    break;
  }
}

/*
  The document is being loaded.
  The DOM is ready to be sccessed.
  The document has been completely loaded.
*/

返回跳转前的网址

/**
 * 通过属性 document.referrer 可返回上一页的网址。
 */

console.log(document.referrer);

返回当前网页中所有 script 元素构成的集合

let scripts = document.scripts;
console.log(scripts.length);
console.log(scripts[3].innerHTML);

访问当前网页的标题

console.log(document.title);
document.title = 'titile demo';

- Book Lists -