你所不了解的javascript操作DOM的细节知识点(一)(8)

EventUtil.addHandler(window, "load", function(){ var link = document.createElement("link"); link.type = "text/css"; link.rel= "stylesheet"; EventUtil.addHandler(link, "readystatechange", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (target.readyState == "loaded" || target.readyState == "complete"){ EventUtil.removeHandler(target, "readystatechange", arguments. callee); alert("CSS Loaded"); } }); link.href = "style.css"; document.getElementsByTagName("head")[0].appendChild(link); });

我们也可以像Javascript一样，为了判断所有的浏览器下支持可以封装一个所有都支持的代码；当然除safari浏览器除外，好像safari浏览器没有生效；

如下代码：

var ua = navigator.userAgent.toLowerCase(); EventUtil.addHandler(window,'load',function(){ var link = document.createElement("link"); link.type = "text/css"; link.rel= "stylesheet"; if(/msie ([^;]+)/.test(ua) || "ActiveXObject" in window) { // IE 浏览器 EventUtil.addHandler(link,'readystatechange',function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (target.readyState == "loaded" || target.readyState == "complete"){ EventUtil.removeHandler(target, "readystatechange", arguments. callee); alert("css已经加载完成"); } }); }else { // 除IE之外的标准浏览器 EventUtil.addHandler(link,'load',function(event){ alert("css已经加载完成"); }); } link.href = "style.css"; document.getElementsByTagName("head")[0].appendChild(link); });

另一种定义样式的方式是使用<style>元素来包含嵌入式的css

如下所示代码：

<style>

body {background-color:red;}

</style>

按照相同的原理，下面的代码除了IE8及以下不支持，其他浏览器下都支持；如下代码：

var style = document.createElement("style"); style.type = "text/css"; style.appendChild(document.createTextNode("body{background-color:red}")); var head = document.getElementsByTagName("head")[0]; head.appendChild(style);

因此我们也可以像JS一样封装一个全兼容的css样式；如下代码所示：

var style = document.createElement("style"); style.type = "text/css"; try{ style.appendChild(document.createTextNode("body{background-color:red}")); } catch (ex){ style.styleSheet.cssText = "body{background-color:red}"; } var head = document.getElementsByTagName("head")[0]; head.appendChild(style);

为了更方便调用，因此我们也可以封装一个函数来；如下代码：

function loadStyleString(css) { var style = document.createElement("style"); style.type = "text/css"; try{ style.appendChild(document.createTextNode(css)); } catch (ex){ style.styleSheet.cssText = css; } var head = document.getElementsByTagName("head")[0]; head.appendChild(style); } // 调用方式如下： loadStyleString("body{background-color:red}");

DOM的扩展

1. querySelector()方法

querySelector()方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配元素，则返回null；如下代码：

复制代码 代码如下:

<div>test</div>
<div>1111</div>
<div>2222</div>
<div>2222</div>

JS代码如下：

// 取得body var body = document.querySelector('body'); console.log(body); // body的引用 // 取得id为test的元素 var test = document.querySelector("#test"); console.log(test); // <div>test</div> // 取得类为cls的第一个元素 var cls = document.querySelector(".cls"); console.log(cls); // <div>1111</div>

同理我们也可以通过Element类型调用querySelector()方法时，只会在该元素后代范围内查找匹配的元素，如下代码：

复制代码 代码如下:

<div>
<p>1111</p>
<p>2222</p>
</div>

我想通过先取得div中的testParent，然后再取得p元素(通过querySelector方法)；如下代码：

var testParent = document.querySelector('.testParent'); var pfirst = testParent.querySelector("p"); console.log(pfirst); // <p>1111</p>

浏览器支持程度：IE8+，firefox，chrome，safari3.1+，opera10+

2. querySelectorAll()方法

querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个css选择符，但是返回的是所有匹配的元素，这个方法返回的是一个NodeList的实例。

如下代码演示：

<div> <em>11111</em> <em>22222</em> <em>33333</em> <em>44444</em> </div>

JS代码如下：