《DOM启蒙》 随笔
使用 Javascript 字符串创建并向 DOM 中添加元素与文本节点
innerHTML、outerHTML、textContent 及 insertAdjacentHTML() 属性和方法提供了使用 Javascript 字符串创建并向 DOM 中添加节点的功能。
<!DOCTYPE html>
<html lang='en'>
<body>
<div id='A'></div>
<span id='B'></span>
<div id='C'></div>
<div id='D'></div>
<div id='E'></div>
<script>
// 创建一个 strong 元素和文本节点,并添加到 DOM
document.getElementById('A').innerHTML = '<strong>Hi</strong>';
// 创建一个 div 元素和文本节点来替换 <span id='B'></span>
// 注意 span#B 被替换掉了
document.getElementById('B').outerHTML = '<div id="B">replace</div>';
// 创建一个文本节点并用它更新 div#C
document.getElementById('C').textContent = 'update';
// 下面是非标准的扩展 例如,innerText 和 outerText
// 创建一个文本节点,并用它更新 div#D
document.getElementById('D').innerText = 'Keep it';
// 创建一个文本节点,并用它替换 div#E (注意 div#E 没了)
document.getElementById('E').outerText = 'real!';
</script>
</body>
</html>
经过 Javascript 部分的操作后,部分 DOM 树变成了这个样子:
<div id="A"><strong>Hi</strong></div>
<div id="B">replace</div>
<div id="C">update</div>
<div id="D">Keep it</div>
real!
innerHTML 属性会将字符串中找到的 HTML 元素都转换成实际的 DOM 节点,而 textContent 只能用来构造文本节点。如果你传给 textContent 的字符串包含 HTML 元素,它会直接按文本格式吐出来。
insertAdjacentHTML() 方法仅在 Element 节点上有效,是个比前述方法精准得多的方式。使用这个方法,就可以将节点插入到开标签之前,开标签之后,闭标签之前,以及闭标签之后:
<!DOCTYPE html>
<html lang='en'>
<body>
<i id='elm'>最近</i>
<script>
var elm = document.getElementById('elm');
elm.insertAdjacentHTML('beforebegin', '<span>A</span>');
elm.insertAdjacentHTML('afterbegin', '<span>B</span>');
elm.insertAdjacentHTML('beforeend', '<span>C</span>');
elm.insertAdjacentHTML('afterend', '<span>D</span>');
</script>
</body>
</html>
执行完 inline 的 Javascript 后, 部分 DOM 树如下:
<span>A</span>
<i id="elm">
<span>B</span>
最近
<span>C</span>
</i>
<span>D</span>
next:
<!DOCTYPE html>
<html lang='en'>
<body>
<div id='A'>
<strong>hanzichi</strong>
</div>
<script>
console.log(document.querySelector('#A').innerHTML); // <strong>hanzichi</strong>
console.log(document.querySelector('#A').textContent); // hanzichi
console.log(document.querySelector('#A').innerText); // hanzichi
</script>
</body>
</html>
将 NodeList 或者 HTMLCollection 转换成 Javascript 数组
将节点列表与 HTML 集合转换成真正的 Javascript 数组可以有许多好处。其一,考虑到 NodeList 和 HTMLCollection 都是实时列表,这么做使得我们能够创建该列表的快照,不与实时 DOM 绑定。其二,转换列表成数组可以使用 Array 对象提供的方法。
// IE8 及之前无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);
// 兼容
function convertToArray(nodes) {
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0);
} catch(ex) {
array = [];
for (var i = 0, len = nodes.length; i < len; i++)
array.push(nodes[i]);
}
return array;
}
获取文档中当前聚焦/激活节点的引用
使用 document.activeElement,我们可以快速取得文档中聚焦/激活节点的引用。在如下代码中,当页面加载,我们将文档聚焦设为 <textarea>
节点然后使用 activeElement 属性取得该节点的引用:
<!DOCTYPE html>
<html lang='en'>
<body>
<textarea></textarea>
<script>
document.querySelector('textarea').focus();
console.log(document.activeElement); // <textarea>
</script>
</body>
</html>
使用 document.hasFocus() 方法,可以知道用户当前是否聚焦在加载该 HTML文档的窗口上(并不是判断某元素是否是焦点)。在如下代码中,你可以看到当我们执行代码,然后聚焦在另一个窗口、标签或者应用程序时,getFocus() 会返回 false。
setTimeout(function() {
console.log(document.hasFocus());
}, 5000);
《DOM启蒙》 随笔的更多相关文章
- "笨方法学python"
<笨方法学python>.感觉里面的方法还可以.新手可以看看... 本书可以:教会你编程新手三种最重要的技能:读和写.注重细节.发现不同.
- 笨方法学python 22,前期知识点总结
对笨方法学python,前22讲自己的模糊的单词.函数进行梳理总结如下: 单词.函数 含义 print() 打印内容到屏幕 IDLE 是一个纯Python下自带的简洁的集成开发环境 variable ...
- 《笨方法学python》随笔
字符串 字符串可以包含格式化字符%s,只要将格式化的变量放到字符串中,再紧跟着一个百分号 %(percent), 再紧跟着变量名即可.唯一要注意的地方是, 如果你想要在字符串中通过格式化字符放入多个变 ...
- LPTHW 笨方法学python 19章
本章节,我只是把所有的输出加上了自己的注释. #!/usr/bin/env python # -*- coding:utf-8 -*- def cheese_and_crakers(cheese_co ...
- 笨方法学python 33课
今天Eiffel看到了第33章,任务是把一个while循环改成一个函数. 我在把while循环改成函数上很顺利,但是不知道怎么写python的主函数,在参数的调用上也出现了问题. 通过查资料,发现py ...
- 《笨方法学Python》加分题32
注意一下 range 的用法.查一下 range 函数并理解它在第 22 行(我的答案),你可以直接将 elements 赋值为 range(0, 6) ,而无需使用 for 循环?在 python ...
- 《笨方法学Python》加分题33
while-leep 和我们接触过的 for-loop 类似,它们都会判断一个布尔表达式的真伪.也和 for 循环一样我们需要注意缩进,后续的练习会偏重这方面的练习.不同点在于 while 循环在执行 ...
- 《笨方法学Python》加分题28
#!usr/bin/python # -*-coding:utf-8-*- True and True print ("True") False and True print (& ...
- 《笨方法学Python》加分题20
加分练习通读脚本,在每一行之前加注解,以理解脚本里发生的事情.每次 print_a_line 运行时,你都传递了一个叫 current_line 的变量,在每次调用时,打印出 current_line ...
- 《笨方法学Python》加分题17
题目通过前学习的文件操作把一个文件中的内容拷贝到另一个文件中,并使用 os.path.exists 在拷贝前判断被拷贝的文件是否已经存在,之后由用户判断是否继续完成拷贝. 新知识os.path.exi ...
随机推荐
- servlet 学习(二)
一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...
- windows,linux,mac生成ssh public key 和 private key
https://help.launchpad.net/YourAccount/CreatingAnSSHKeyPair Creating the key How you create your SSH ...
- ORA-00030: User session ID does not exist.
同事在Toad里面执行SQL语句时,突然无线网络中断了,让我检查一下具体情况,如下所示(有些信息,用xxx替换,因为是在处理那些历史归档数据,使用的一个特殊用户,所以可以用下面SQL找到对应的会话信息 ...
- Linux Swap交换分区介绍总结
Swap交换分区概念 什么是Linux swap space呢?我们先来看看下面两段关于Linux swap space的英文介绍资料: Linux divides its physical RA ...
- 自定义日志阅读器——包括了一个load取Tomcat日志的分析器
最近在写往公司产品里添加Tomcat适配器,以支持Tomcat.有一些功能需要摘取到Tomcat的部分日志.没有合适的工具,也不想去网上找了,就自己写了一个. 简单的画了一下设计方案: 下面直接上代码 ...
- Sql Server之旅——第八站 复合索引和include索引到底有多大区别?
周末终于搬进出租房了,装了宽带....才发现没网的日子...那是一个怎样的与世隔绝呀...再也受不了那样的日子了....好了,既然网 安上去了,还得继续我的这个系列. 索引和锁,这两个主题对我们开发工 ...
- oracle DB_LINK
1.先创建远程数据库服务名(注意,如果服务器既有oracle服务端又有客户端,需要在服务端的tnsnames.ora中配置服务名,否则会报如下错误): SQL> select count(*) ...
- Android中使用dimen定义尺寸(转)
(转自:http://blog.csdn.net/yuzhiboyi/article/details/7696174) 最近,遇到了一种定义尺寸的方法,类似于C里面的宏定义一样,其实以前已经见过了这种 ...
- Java报表FineReport在医院院长查询分析系统中有什么用
1.医院院长查询系统的价值 目前,大中型医院的信息处理正从传统手工方式飞速向电脑信息化建设方案转变,一个大中型医院担负着繁重的医疗和科研任务,以及繁杂的事务性工作,院长必须时刻与各科室保持密切的连续, ...
- 解决PowerShell命令行窗口中不显示光标的问题
不知道什么原因,在有些系统上打开PowerShell命令行窗口后,光标无法显示.这种情况在Windows Server 2008/2012.Windows 8/9/10上都出现过,估计是由于某些系统软 ...