DOM 扩展

1. 呈现模式

document.compatMode == "CSS1Compat"; 标准模式

document.compatMode == "BackCompat"; 混合模式

if(document.compatMode == "CSS1Compat"){
    return "SATAND";
}else{
    return "Quirks";
}

2. 操作内容

a. innerText

设置和获取文本节点字符串

IE、Safari、Opera、Chrome支持innerText属性

FireFox 支持textContent属性

utils.getInnerText = function(element){
		return (typeof element.textContent == "string") ? element.textContent:element.innerText;
	}

	utils.setInnerText = function(element,text){
		if(typeof element.textContent == "string")
			element.textContent = text;
		else
			element.innerText = text;
	}

b. innerHTML

设置文本几点字符串是和innerText 一样

通过innerHTML 插入<script> IE支持,但是必须设置 defer特性,但是必须添加作用域元素

div.innerHTML = "_<script defer> alert();</scr"+"ipt>";  // 多出一个_ 文本节点

div.innerHTML = "<input type=\"hidden\"><script defer>alert();</scr" + "ipt>"; // 使用隐藏的<input>字段,而且不影响页面布局。

插入<style>

//Opera Firefox ie

div.innerHTML = "_<style type=\"text/css\">body {background-color:red;}</style>";

div.removeChild(div.firstChild);

//safari chorme

document.getElementsByTagName("head")[0].appendChild(div.firstChild);

Opera Firefox ie 需要一个前置作用域,添加完删除第一个文本节点。
safari chorme 必须将style 元素放到head中,否则会忽略它

不支持innerHTML的元素有

[<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<title>、<tr>]

时间: 2024-11-05 15:56:53

DOM 扩展的相关文章

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

js DOM 扩展

1. 选择符API querySelector()          返回匹配的第一个元素,接收一个 CSS 选择符.没有找到返回 null. querySelectorAll()      返回所有匹配的一个 NodeList, 这是一个快照不会动态改变.接收一个 CSS 选择符. mathesSelecttor()      如果调用元素与该选择符匹配,返回true, 否则返回 false. 接收一个 CSS 选择符. 2. 与类相关的扩充 getElementsByClassName()

JavaScript学习 八、DOM扩展

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5.这两个扩展都是源自开发社区.此外还有一个不那么因为瞩目的ELement Traversal(元素遍历)规范.为DOM添加了一些属性. 选择符API 众多JavaScript 库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素. 实际上 jQuery 的核心就是通过CSS选择符查询DOM 文档取得元素的引用,从而抛开了 getElementById() 和 getElementsByTagName

DOM扩展学习笔记

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5,还有一个不太瞩目的Element Traversal元素遍历规范为DOM添加了一些属性,另外还有一些专有扩展. 选择符API 元素遍历 HTML5 专有扩展 选择符API 让浏览器原生支持css查询,原理就是所有实现这一功能的JavaScript库都会写一个基础的CSS解析器,然后再使用已有的DOM方法查询文档并找到匹配的节点.当把这个功能变成原生API后,解析和树查询操作可以在浏览器内部通过编译后的代码来完成,极大

DOM扩展:DOM API的进一步增强[总结篇-下]

本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档插入大量HTML标记的时候操作还是很繁杂的,每次插入一个元素,不仅要调用创建元素和文本节点的接口,还要调用appendChild等向文档中添加元素的接口,而且在添加时还要按照正确的顺序.而如果使用插入标记的方法,直接向文档中插入HTML字符串,由执行环境自动解析HTML字符串并创建相应的节点并添加到文档中,这

JavaScript的DOM扩展

虽然 DOM 为与 XML 及 HTML 文档交互制定了一系列核心 API,但仍然有几个规范对标准的 DOM进行了扩展.这些扩展中有很多原来是浏览器专有的,但后来成为了事实标准,于是其他浏览器也都提供了相同的实现.本章介绍的三个这方面的规范如下. 1 Selectors API,定义了两个方法,让开发人员能够基于 CSS 选择符从 DOM中取得元素,这两个方法是 querySelector() 和 querySelectorAll() . 2 Element Traversal,为 DOM 元素

10. javacript高级程序设计-DOM扩展

1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有匹配的NodeList元素 1.2 HTML5 1.2.1 与类相关的扩充 l getElementsByClassName() 接收一个参数,一个包含一或者多个类名的字符串,返回带有指定类的所有元素的NodeList l classList属性,add(value),contains(value)

JavaScript学习笔记(十一)---- DOM扩展

(一)DOM扩展 对DOM的主要的扩展是SelectorsAPI(选择符API)和HTML5,还有一个Element Travesal规范. 1.选择符API jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getElementById( ) 和 getElementsByTagName( ). Selectors API Level 1的核心是两个方法:querySelector( )和 querySelectorAll( ). querySelector( ):

第十一章:DOM扩展

DOM扩展 选择符API querySelector方法 querySelectorAll方法 matchesSelector方法 元素遍历 HTML5 与类相关的补充 getElementsByClassName 方法 classList属性 焦点管理 HTMLDocument的变化 readyState 属性 兼容模式 head属性 字符集属性 自定义数据属性 插入标记 innerHTML 属性 outerHTML inserAdjacentHTML 方法 内存和性能问题 scrollInt

DOM扩展-Selectors API(选择符 API)

DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,SelectorsAPILevel 1的核心是两个方法:querySelector()和querySelectorAll(),可以通过Document及Element类型的实例调用他们. querySelector()方法接受一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回nul