DOM扩展:DOM API的进一步增强[总结篇-下]
<div id="wrapper">
<p>一个段落在这里</p>
<span>这里是一个span</span>
</div> 我们如果获取div#wrapper的innerHTML值应该就是:
<p>一个段落在这里</p>
<span>这里是一个span</span>
但是IE8及以下的浏览器,在使用innerHTML属性时返回的字符串有两处不同:
<P>一个段落在这里</P><SPAN>这里是一个span</SPAN>
div.innerHTML = "<strong>\"This is innerHTML\"</strong>";
div.innerHTML = "<script>alert('dd')<\/script>";
代码执行后,标签会被插入div中,但脚本在任何浏览器中都不会执行。再来修改一下代码:
div.innerHTML = "<script defer='defer'>alert('dd')<\/script>";
这段代码为innerHTML加入了一个defer特性,但正如上文所讲的,script是一个"没有作用域"的元素,所以在IE9及以下浏览器中,脚本还是不会被执行。这个时候只要在<script>前面添加一个字符串或者其他"有作用域"的元素即可,为了不影响文档的实际内容,一般在script标签之前添加一个隐藏的input元素即可,代码如下:
div.innerHTML = "<input type='hidden'/><script defer='defer'>alert('dd')<\/script>";
这样在IE9及以下的浏览器中,脚本就能够执行了。
<div id="wrapper">
<p>一个段落在这里</p>
<span>这里是一个span</span>
</div>
在IE8及以下的浏览器返回:
<DIV id=wrapper><P>一个段落在这里</P><SPAN>这里是一个span</SPAN></DIV>
而如果是写入outerHTML属性的话,则会将div本身直接替换掉,这也是与innerHTML的不同之处。
div.insertAdjacentHTML("beforeend","<p>在结束前插入一个</p>");
console.log(div.innerHTML);
则返回的代码就是:
<p>一个段落在这里</p>
<span>这里是一个span</span>
<p>在结束前插入一个</p>
insertAdjacentHTML方法的兼容性如下图:
在IE6-8下,table, tbody, thead, tr 元素调用这个方法会报错。
要强制浏览器以某种模式渲染页面,可以通过设置HTTP的X-UA-Compatible头部或设置对应的meta标签来实现,声明方式为:
<meta http-equiv="x-ua-compatible" content="IE=IEVersion"/>
其中,IEVersion的可能取值有:
IE5+,Firefox3.5+,chrome,Opera8+,Safari3+支持children属性。 4.3 contains方法
<body>
<div id="div-1">
<div id="title">
<h1 id="title-h1">标题</h1>
<span id="more">更多</span>
</div>
</div>
<div id="div-2">
<div id="content-wrapper">
<div id="block">
<p id="desc">这里是一段描述</p>
<img id="img" src=""/>
</div>
</div>
</div>
</body>
var div2 = document.getElementById("div-2"),
div1 = document.getElementById("div-1"),
more = document.getElementById("more");
alert(nodeContains(div1, more));
alert(nodeContains(div2, more));
function nodeContains(node, childNode){
var result = false;
while(childNode != null){
if(childNode === node){
result = true;
break;
}
childNode = childNode.parentNode;
}
return result;
}
代码执行后将分别弹出true和false
注:Firefox9+和其他浏览器都支持contains方法。
alert(div1.contains(more));
alert(div2.contains(more));
4.4 插入文本
<div id="wrapper">
<p>一个段落在这里</p>
<span>这里是一个span</span>
</div>
那么调用div#wrapper的innerText属性返回的内容可能是:
一个段落在这里 这里是一个span
也可能是:
一个段落在这里
这里是一个span
这主要还是由于不同浏览器处理空白符节点的方式不同而导致的。
div.innerText = "<strong>Hello</strong>";
代码执行后,显示结果为:
DOM扩展:DOM API的进一步增强[总结篇-下]的更多相关文章
- DOM扩展:DOM API的进一步增强[总结篇-上]
DOM1级主要定义了文档的底层结构,并提供了基本的查询操作的API,总体而言这些API已经比较完善,我们可以通过这些API完成大部分的DOM操作.然而,为了扩展DOM API的功能,同时进一步提高DO ...
- DOM扩展-Selectors API(选择符 API)、元素遍历
DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...
- 前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)
第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作 数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...
- HTML5学习笔记(二十四):DOM扩展
DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...
- dom扩展
第十一章 DOM扩展 一.选择符API 1.querySelector()方法 接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...
- DOM扩展札记
Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...
- 11. javacript高级程序设计-DOM扩展
1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...
- 《JAVASCRIPT高级程序设计》DOM扩展
虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...
- JavaScript基础笔记(八)DOM扩展
DOM扩展 一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例 ...
随机推荐
- 【算法】Escape
The students of the HEU are maneuvering for their military training. The red army and the blue army ...
- 各种 on事件触发js代码
[转]各种 on事件触发js代码 1.onmouseenter:当鼠标进入选区执行代码 <div style="background-color:red" onmouseen ...
- 初识kbmmw 中的ORM
在kbmmw 5.02.1 中,加入了ORM 的功能(这里可能和其他语言的定义不完全一样),我们就简单的认为 它就是一个类与数据库的转换吧.今天就先介绍一下如何通过kbmmw 的ORM 功能,实现类与 ...
- String拼接
1. String[] members=ArrayDATA_IDS; String usernames = ""; for(String id :members) { userna ...
- 在vue或者react中使用express框架
在react 或者 vue项目中使用express框架 1.创建vue或者 react 项目 2.在项目中创建server文件夹,创建server.js //require()方法引入express模 ...
- elasticsearch中文发行版 安装
参见: https://github.com/medcl/elasticsearch-rtf 具体步骤参见:ubuntu安装elasticsearch-rtf elasticsearch-head 安 ...
- 使用spring boot +WebSocket实现(后台主动)消息推送
言:使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!主要是tomcat的兼容与支持. ...
- linux复制文件并修改文件名
#!/bin/bash #复制/casnw/backup/db203oradata/目录下的所有后缀名为dmp的文件拷贝到/casnw/backup/dbmonthbak 目录下cp -f /casn ...
- 添加全局函数$.extend和对象方法$.fn
## $(function () { $.fn.shadow = function (opts) { return this.each(function () { var defaults = { / ...
- Android多点触控手势基础
处理多点触控手势 多点触控就是同时把一根以上的手指放在屏幕上. 再继续往下以前需要补充一些名词: 触控手势:就是把一根或者几根手指放在屏幕上做各种动作,其中包括保留一根手指的前提下,拿起或者放下其余的 ...