DOM扩展
来源：互联网 发布：零基础学编程 编辑：程序博客网 时间：2024/05/24 07:35
选择符API
querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
这里特别注意：该方法的参数是一个CSS选择符。注意和getElementById() 方法以及getElementsByTagName()方法的区别。
为 <div> 元素中的第一个有 target 属性的 <a> 元素添加红色边框：
var x = document.getElementById("myDIV");x.querySelector("a[target]").style.border = "10px solid red";如果要为所有含有target属性的<a>元素添加红色边框：使用querySelectorAll()方法
var x = document.getElementById("myDIV");x.querySelectorAll("a[target]").style.border = "10px solid red";<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>选择符API</title> </head> <body> <ul> <li>Frist item</li> <li class="selected">Second item</li> <li>Third item</li> </ul> <script type="text/javascript"> //取得body元素 var body=document.querySelector("body"); console.log(body);//<body> //取得id为"myDiv"的元素 var myDiv=document.querySelector("#myDiv"); console.log(myDiv);// null //取得类为"selected"的第一个元素 //Document类型调用querySelector(),会在文档元素范围内查找匹配的元素 var selected=document.querySelector(".selected"); console.log(selected.innerHTML);//Second item //Element元素类型调用querySelector(),会在该元素范围内查找匹配的元素，即body元素 var img = document.body.querySelector("img.button"); console.log(img);//null </script> </body></html>querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但querySelectorAll()是返回所有匹配的元素，是一个NodeList对象
要取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号语法
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>querySelectorAll</title> <style type="text/css"> .important{background: red;font-weight: bold;} </style> </head> <body> <div id="myDiv"> <h1>HTML Ipsum Presents</h1> <p><strong>Pellentesque </strong> senectus et <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. <code>commodo vitae</code>, ornare sit <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. turpis elit sit amet quam.</p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor </li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> </div> <script type="text/javascript"> if (document.querySelectorAll){ //获取id为myDiv的div中的所有em元素 var ems = document.getElementById("myDiv").querySelectorAll("em"); console.log(ems.length);//1 //取得所有类为"selected"的所有元素 var selecteds = document.querySelectorAll(".selected"); console.log(selecteds.length);//0 //取得所有<p>元素中的所有<strong>元素 var strongs = document.querySelectorAll("p strong"); console.log(strongs.length);//2 //取得NodeList中的元素，可以使用item()方法或者方括号语法 for(var i=0;i<strongs.length;i++){ console.log(strongs[i]);//或者使用strongs.item(i); strongs[i].className='important'; } } else { alert("Selectors API not supported in this browser"); } </script> </body></html>matchesSelector()方法接收一个参数即CSS选择符，如果调用元素和选择符匹配则返回true
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>matchesSelector</title> </head> <body class="myBody"> <script type="text/javascript"> function matchesSelector(element,selector){ if(element.matchesSelector){ return element.matchesSelector(selector); }else if(element.msMatchesSelector){//IE return element.msMatchesSelector(selector); }else if(element.mozMatchesSelector){//FF return element.mozMatchesSelector(selector); }else if(element.webkitMatchesSelector){//Chrome return element.webkitMatchesSelector(selector); }else{ alert("浏览器不支持matchesSelector"); } } if (matchesSelector(document.body, "body.myBody")){ alert("It's myBody");//会弹出It's myBody } </script> </body></html>元素遍历
- childElementCount：返回子元素(不包括文本节点和注释)的个数
- fristElementChild：指向第一个子元素，fristChild的元素版
- lastElementChild：指向最后一个子元素，lastChild的元素版
- previousElementSibling：指向前一个同辈元素； previousSibling的元素版
- nextElementSibling：指向前一个同辈元素； nextSibling的元素版
利用这些属性，不必担心空白文本节点，可以方便的查找DOM元素了
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>元素遍历</title> </head> <body> <h1>HTML Ipsum Presents</h1> <p><strong>Pellentesque</strong> senectus et netus <em>Aenean</em> Mauris placerat eleifend leo. <code>commodo vitae</code>Aenean fermentum<a href="#">Donec non enim</a> in turpis</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Vivamus magna. </p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <h1>All Children of <body>:</h1> <div></div> <script type="text/javascript"> //firstElementChild是第一个元素子节点和firstChild是第一个子节点，注意区别 if (document.body.firstElementChild){ //document.body.firstElementChild是body元素的第一个元素子节点 var i, len, child = document.body.firstElementChild; while(child != document.body.lastElementChild){ console.log("<p>" + child.tagName + "</p>"); child = child.nextElementSibling;//获取当前子节点的下一个同辈元素 } } else { document.write("<p>Element Traversal API not supported.</p>"); } console.log(document.body.lastElementChild.tagName);//SCRIPT </script> </body></html><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>元素遍历</title> </head> <body> <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <input type="button" value="计算子节点数" onclick="countChildren()"> <script type="text/javascript"> function countChildren(){ var ul = document.getElementById("myList"); console.log("children.length="+ul.children.length); //3 in all browsers for(var i=0,len=ul.children.length;i<len;i++){ console.log(ul.children[i]);//返回3个li元素节点 //注意children和childNodes区别：children只返回包含元素中的元素子节点 //childNodes会返回空白文本节点和子元素节点，除此之外两者没有区别 } console.log("childNodes.length="+ul.childNodes.length); // 7 返回4个空白文本节点和3个li元素节点 } </script> </body></html>HTML5与类相关的扩充
getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList
<script type="text/javascript"> //取得所有类中包含"username"和"current"的元素，类名的先后无所谓 var all=document.getElementsByClassName("username current"); //取得id为myDiv的元素中带有类名"selected"的所有元素 var selected=document.getElementById("myDiv").getElementsByClassName("selected"); </script>HTML5新增了一种操作类名的方法，为所有元素添加了classList属性
这个新类型定义了如下方法：
- add:将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
- contains:表示列表中是否存在给定的值，如果存在则返回true，否则返回false
- remove：从列表中删除给定的字符串
- toggle：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>classList Example</title> <style> .highlight { background: yellow; } </style></head><body> <div id="myDiv" class="init">Hello world!</div> <input type="button" value="Add class" onclick="addClass()"> <input type="button" value="Remove class" onclick="removeClass()"> <input type="button" value="Toggle class" onclick="toggleClass()"> <input type="button" value="Contains class?" onclick="containsClass()"> <p>This demo works in Firefox 3.6 and Chrome 8.</p> <script type="text/javascript"> function addClass(){//添加类名 var myDiv = document.getElementById("myDiv"); myDiv.classList.add("highlight");//class="init highlight" } function removeClass(){//删除类名 var myDiv = document.getElementById("myDiv"); myDiv.classList.remove("highlight"); } function toggleClass(){ var myDiv = document.getElementById("myDiv"); myDiv.classList.toggle("highlight");//toggle()方法：如果已经存在给定的class则删除，不存在则添加 } function containsClass(){//检测是否包含类名 var myDiv = document.getElementById("myDiv"); alert(myDiv.classList.contains("highlight"));//false } </script></body></html>HTML5焦点管理
HTML5添加了辅助管理DOM焦点的功能。新增的document.activeElement属性始终会引用DOM中当前获得了焦点的元素。
元素获取焦点的方式：页面加载、用户输入和在代码中调用focus()方法
新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>焦点管理</title> </head> <body> <button id="myBtn">点击</button> <script type="text/javascript"> var btn=document.getElementById("myBtn"); btn.focus(); //console.log(document.activeElement===btn);//true console.log(document.hasFocus());//true </script> </body></html>HTMLDocument的变化
兼容模式
compatMode属性告诉开发人员浏览器采用了哪种渲染模式
在标准模式下，document.compatMode的值为”CSS1Compat”
在混杂模式下，document.compatMode的值为”BackCompat”
<script type="text/javascript"> if(document.compatMode=="CSS1Compat"){ alert("标准模式"); }else{ alert("混杂模式"); } </script>readyState属性
document对象的引入了readyState属性
document.readyState的有两个：
loading:正在加载文档
complete：已经加载完毕文档
head属性
HTML5新增了document.head属性引用文档的元素
使用一下兼容写法：
var head=document.head||document.getElementsByTagName(“head”)[0];
插入文本
innerHTML属性
在读取模式下，innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记
在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后利用这个DOM树完全替换调用元素原先的所有子节点
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>innerHTML属性</title> </head> <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> <script type="text/javascript"> var div = document.getElementById("content"); alert(div.innerHTML); /* div.innerHTML返回div中所有子节点(包括元素、注释和文本节点)对应的HTML标记 返回结果： <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> */ //如果设置的值仅仅是文本而没有HTML标签，那么结果就是设置纯文本 div.innerHTML="Hello innerHTML属性"; //这个带有HTML标签 //div.innerHTML="<h1>Hello innerHTML属性</h1>"; </script> </body></html>outerHTML属性
在读取模式下，outerHTML属性返回调用它的元素以及所有子节点的HTML标签。
在写模式下，outerHTML属性会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>outerHTML属性</title> </head> <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> <script type="text/javascript"> var div = document.getElementById("content"); alert(div.outerHTML); /* <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.outerHTML="<p>Hello outerHTML属性</p>"; //这样设置会使得p标签替换DOM树中的div元素以及它的子元素 </script> </body></html>innerText属性
通过innerText属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。
在通过innerText属性读取值的时候，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。
在通过innerText属性写入值的时候，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>innerText属性</title> </head> <body> <div id="box"> <p>我是一个段落</p> <ul> <li>哈哈</li> <li>呵呵</li> <li>嘿嘿</li> </ul> </div> <script type="text/javascript"> var oDiv=document.getElementById("box"); alert(oDiv.innerText);//结果如下 /* 我是一个段落哈哈呵呵嘿嘿 */ //使用innerText属性设置这个div元素的内容 //通过设置innerText属性移除了先前存在的所有子节点，完全改变了DOM子树 oDiv.innerText="Hello innerText"; //执行后变为 //<div id="box">Hello innerText</div> </script> </body></html>outerText属性
除了作用范围扩大到了包含调用它的节点之外，其他的与innerText属性基本没有多大区别。在读取文本值是，两者的结果完全一样。但是在写模式下，outerText属性不只是替换调用它的元素的子节点，而是会替换整个元素(包括子节点)。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>outerText属性</title> </head> <body> <div id="box"> <p>我是一个段落</p> <ul> <li>哈哈</li> <li>呵呵</li> <li>嘿嘿</li> </ul> </div> <script type="text/javascript"> var oDiv=document.getElementById("box"); alert(oDiv.outerText);//结果如下 /* 我是一个段落哈哈呵呵嘿嘿 */ //使用outerText属性设置这个div元素的内容 oDiv.outerText="Hello outerText"; //执行后变为Hello innerText //div元素以及它的子元素全部被替换 </script> </body></html>textContent属性
textContent属性是DOM3级规定的一个属性，现代大部分浏览器都支持这个属性，它的作用类似于innerText属性。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>textContent属性</title> </head> <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.textContent); } </script> </body></html> 0 0
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- js--DOM--2.DOM扩展
- javascript DOM扩展
- webkit扩展DOM事件
- JavaScript DOM 扩展
- JavaScript：DOM扩展
- DOM 扩展 Selectors API
- javascript DOM扩展
- JavaScript DOM扩展
- DOM扩展 ---高程笔记
- HTML5之DOM扩展
- 关于错排公式的推导与应用
- Sublime Text 2安装及汉化
- java.lang.Runtime类
- yii2框架手动添加插件
- Manacher算法
- DOM扩展
- mysql的auto_increment详解
- OpenSessionInViewFilter的配置
- centos下彻底删除MYSQL和重新安装MYSQL [yum方式]
- 构建之法读后感
- shell输入输出重定向
- 记小问题：没卸载干净MQ导致的问题
- coding as talking
- WARN No appenders could be found for logger的解决方法
