《DOM启蒙》 随笔
2015-12-26 16:56
393 查看
使用 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);
相关文章推荐
- 找工作总结(微电子、FPGA方向)
- Visual Studio 设置窗体控件,随窗体拖动变化大小
- Windows系统和Linux系统中的静态链接库与动态链接库(三)
- Introduction to Probability (三) Independence
- input hidden用法
- Canvas基本匀速运动
- Mahout机器学习平台之聚类算法详细剖析(含实例分析)
- 内存映射文件(专门读写大文件)
- #菜鸟新手EclipseJavaEE&MySQL&Tomcat#关于一个Eclipse中登陆界面通过连接MySQL数据库进行验证的小体验(感谢qq群友引燃的解答让我解决这个小问题)
- grub加密
- Linux压缩与解压缩命令详解
- 【VMware】将单个vmdk文件分割成多个2GB大小的vmdk文件
- error:Error parsing XML:unbound prefix
- OC 学习历程回顾
- CentOS 6.5使用yum快速搭建LAMP环境
- 执行安装程序
- 数据挖掘--kmeans聚类算法mapreduce实现 代码
- Bitmap算法
- IE浏览器文档标准模式与文档兼容模式的区别
- Java实体类的作用--资料