标签：hello 插入 get firefox 实验 lis ems 好的 html标签
if (document.querySelector){
//get the body element
var body = document.querySelector("body");
alert(body.tagName);
//get the element with the ID "myDiv"
var myDiv = document.querySelector("#myDiv");
alert(myDiv);
//get first element with a class of "selected"
var selected = document.querySelector(".selected");
alert(selected.innerHTML);
//get first image with class of "button"
var img = document.body.querySelector("img.button");
alert(img);
} else {
alert("Selectors API not supported in this browser");
} if (document.querySelectorAll){
//get all <em> elements in a <div> (similar to getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");
alert(ems.length);
//get all elements with class of "selected"
var selecteds = document.querySelectorAll(".selected");
alert(selecteds.length);
//get all <strong> elements inside of <p> elements
var strongs = document.querySelectorAll("p strong");
alert(strongs.length);
} else {
alert("Selectors API not supported in this browser");
} function matchesSelector(element, selector){
if (element.matchesSelector){
return element.matchesSelector(selector);
} else if (element.msMatchesSelector){
return element.msMatchesSelector(selector);
} else if (element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
} else if (element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
} else {
throw new Error("Not supported.");
}
}
if (matchesSelector(document.body, "body.page1")){
alert("It‘s page 1!");
} var child = element.firstElementChild;
while (child != element.lastElementChild) {
//todo
child = nextElementSibling;
} <body>
<h1 class="h1"></h1>
<h1 class="h1 h2"></h1>
<h1 class="h1 h2 h3"></h1>
<h1 class="h1 h2 h3 h4"></h1>
<h1 class="h1 h2 h3 h4 h5"></h1>
<script type="text/javascript">
alert(document.getElementsByClassName("h1").length);//5
alert(document.getElementsByClassName("h2").length);//4
alert(document.getElementsByClassName("h1 h2").length);//4
alert(document.getElementsByClassName("h2 h1").length);//4
alert(document.getElementsByClassName("h5 h1").length);//1
alert(document.getElementsByClassName("h5 h1").length);//1 空格数好像是没关系的
</script>
</body> <h1 class="h1"></h1>
<h1 class="h1 h2"></h1>
<h1 class="h1 h2 h3"></h1>
<h1 class="h1 h2 h3 h4"></h1>
<h1 class="h1 h2 h3 h4 h5" id="xx"></h1>
<script type="text/javascript">
var xx1 = document.getElementsByClassName("h1 h4");
alert (xx1.length);//2
var xx2 = document.getElementById("xx");
xx2.className = "h1 h2 h3 h5";
alert (xx1.length);//1 这说明的确是NodeList对象（或者类似），所以避免频繁访问该类对象
</script> var classNames = xx2.className.split(/\s+/);
for (var i=0, len = classNames.length; i < len; i++) {
if (className[i] == "h4") {//这里可以以参数名的形式传递
classNames.splice(i, 1);
break;
}
}
xx2.className = classNames.join(" ");xx2.classList.remove("h4")去解决。 var button = document.getElementById("myButton");
button.focus();
alert(button == document.activeElement);//true<!DOCTYPE html>
<html>
<head>
<title>Selectors API Example</title>
<script type="text/javascript">
alert("loading:"+document.activeElement);
var xx1 = document.activeElement;//null
</script>
</head>
<body onload="alert(‘loaded:‘+document.activeElement);alert(xx2 == document.activeElement)">
<button id="myButton"></button>
<script type="text/javascript">
alert("loading:"+document.activeElement);
var xx2 = document.activeElement;//body
alert(document.readyState);//loading 下面会说到
</script>
</body>
</html> //最常用的用法
if (document.readyState == "complete") {
//todo
} //IE下可以通过
if (document.compatMode == "CSS1Compat") {
alert("Standards mode");
} else {
alert("Quirks mode");
} var head = document.head || document.getElementsByTagName("head")[0];<meta>元素、响应头部或直接设置charset属性修改这个值。 alert(document.charset);//Chrome:window-1251 IE:gb2312
document.charset = "UTF-8";<!DOCTYPE html>
<html>
<head>
<title>Selectors API Example</title>
</head>
<body>
<div id="myDiv" data-appId="123456" data-MYNAME="hange"></div>
<script>
var div = document.getElementById("myDiv");
var appId = div.dataset.appid;//appId 居然是undefined 难道都转成了小写？
var myname = div.dataset.myname;//MYNAME 居然是undefined 难道都转成了小写？
alert(appId);
alert(myname);
div.dataset.appId = "234567";
div.dataset.myname = "miaoch";
if (div.dataset.myname) {
alert(div.dataset.myname);
alert(div.dataset.appid);//123456
}
</script>
</body>
</html> <div id="content">
<p>this is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<script>
var div = document.getElementById("content");
console.log(div.innerHTML);
</script> div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";
console.log(div.innerHTML);//Hello & welcome, <b>"reader"!</b><script>节点。我在Chrome中测试如下代码： <button onclick="hello();">222</button>
<div id="content">
<p>this is a <strong>paragraph</strong> with a list following it.</p>
<UL>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</UL>
</div>
<script>
var div = document.getElementById("content");
console.log(div.innerHTML);
div.innerHTML = "_<script>function hello(){alert(‘hello‘);}<\/script>";
</script><script>元素已经插进去了，但是毫无作用，点击按钮依然会找不到hello()。而且我把一个花括号删掉，令其语法错误，也不会报错。可见在Chrome中确实不能这么做。而书上说IE8及更早版本是唯一能在这种情况下执行脚本的浏览器，but我试了毫无卵用啊。还说了一大堆东西，首先不能是<script>开头，因为这个是无作用域的元素，所以必须在前面加一个文本节点或者元素节点。推荐就是加一个隐藏的input元素。但是我测试下来还是无法执行，所以这一块我就不继续研究了，毕竟谁会这么写代码啊！<style>元素，大部分浏览器都是支持的 <body>
<div id="content" class="test">
<p>this is a <strong>paragraph</strong> with a list following it.</p>
<UL>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</UL>
</div>
<script>
var div = document.getElementById("content");
div.innerHTML = "<style> body { background-color: red;}</style>";
</script>
</body><col><colgroup><frameset><head><html><style><table><tbody><thead><tfoot><tr>，此外在IE 8及更早版本中，<title>元素也没有innerHTML属性。 var text = "<a href=\"#\" onclick=\"alert(‘hi‘)\">click me</a>";
alert(window.toStaticHTML(text));//<a href="#">click me</a>e.innerHTML = e.innerHTML + newHTML;去解决（调换顺序）。<meta>标签来设置： <meta http-equiv="X-UA-Compatible" content="IE=IEVersion"> <div id="test">
<!--这是一个注释节点-->
<p>this is a <strong>paragraph</strong> with a list following it.</p>
</div>
<script>
var count = document.getElementById("test").children.length;
alert(count);
</script> alert(document.documentElement.contains(document.body));//true使用DOM Level 3 的compareDocumentPosition()也能够确定节点间的关系。支持这个方法的浏览器有：IE9+ Firefox Safari Opera9.5+和Chrome。该方法返回一个表示关系的位掩码（bitmask）
| 掩码 | 节点关系 |
|---|---|
| 1 | 无关 |
| 2 | 居前(给定节点在该节点的前面) |
| 4 | 居后 |
| 8 | 包含(给定节点是该节点的祖先) |
| 16 | 被包含 |
为模仿contains方法，应该关注的掩码是16。
var result = document.documentElement.compareDocumentPosition(document.body);
alert(result);//20
alert(!!(result & 16));//true function contains(refNode, otherNode){
if (typeof refNode.contains == "function" &&
(!client.engine.webkit || client.engine.webkit >= 522)){
//版本号大于522的是至少是Safari 3，低版本有bug
return refNode.contains(otherNode);
} else if (typeof refNode.compareDocumentPosition == "function"){
return !!(refNode.compareDocumentPosition(otherNode) & 16);
} else {
var node = otherNode.parentNode;
do {
if (node === refNode){
return true;
} else {
node = node.parentNode;
}
} while (node !== null);
return false;
}
} <body>
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<input type="button" value="Get InnerText" onclick="getInnerText()">
<script type="text/javascript">
function getInnerText(){
var div = document.getElementById("content");
alert(div.innerText); //works in IE, Safari, and Opera 不过我的Chrome也可以，所有还真没有个准。
}
</script>
</body>div.innerText = div.innerText可以去除掉所有的HTML标签。 function getInnerText(element){
return (typeof element.textContent == "string") ?
element.textContent : element.innerText;
}
function setInnerText(element, text){
if (typeof element.textContent == "string"){
element.textContent = text;
} else {
element.innerText = text;
}
} //将页面主体滚动5行
document.body.scrollByLines(5);
//在当前元素不可见的时候，让它进入浏览器的视口
document.iamges[0].scrollIntoViewIfNeeded();
//将页面主体往回滚动一页
document.body.scrollByPages(-1);标签：hello 插入 get firefox 实验 lis ems 好的 html标签
原文地址：http://blog.csdn.net/miaoch/article/details/70578422
