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类型实例 ...
随机推荐
- js Array 方法总结
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 图解http学习笔记【一】
不想单纯的把书里的知识点罗列一遍 这周,我们的安全代码终于改完了.我在微信上报了个叫 一修读书的课程,现在已经听了6天.感觉并不是很神奇,聊胜于无.倒是趁着当当搞活动买回来好几本书,其中就有这本图解h ...
- CMDB 配置管理数据库
- oracle创建表空间、添加数据库文件
创建表空间: create [undo|TEMPORARY]tablespace venn datafile '/opt/oracle/db01/app/oracle/oradata/OSSORCL/ ...
- MFC控件Slider Control的使用
写MFC界面程序时,今天恰好用到Slider控件,做一个小小的记录. 步骤 1.在工具栏中添加Slider Control控件: 2.在控件上右键->添加变量(Add Variable...), ...
- vue +bootstrap 写的小例子
最近vue挺火,最近也不是特别忙,就学习了下. vue和angular非常像都是MVVM.道理都是想通的,就是语法的差异 我觉得vue和angular区别: 1.vue更轻,更便捷,适用于移动开发 2 ...
- java常用设计模式十:模板模式
一.定义 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 如果上面的话不好理解,请看下面的例子 二.示例 1)定义一个模 ...
- C++之基于排序方法求一组数的中位数
中位数也就是中值: 故需要先对数组进行排序(选择,插入,冒泡排序),然后在找出数组的中值. //求中值 #include<iostream> using namespace std; in ...
- BT1120中的串行传输
BT1120不仅支持并行传输,也定义了并行传输.详细说明可以看ITU-R BT1120,在这里只做概述和总结.
- HTML中JavaScript调用方法
我在写web页面的时候,经常用js实现某些功能,我用的方法有两种: 1.点击调用JavaScript: <button onclick="loadXMLDoc()">b ...