主页 > 专题教程 > javascript > js基础 >
来源:自学PHP网 时间:2018-02-08 10:24 作者: 阅读:次
[导读] JavaScript通过Document类型来表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。而且Document对象是window对象的一个实例,因此可以将它作为全局对象来访问。...
JavaScript通过Document类型来表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。而且Document对象是的一个实例,因此可以将它作为全局对象来访问。Document类型节点具有下面的一些特征:
Document类型可以表示HTML页面或其它基于XML的文档。最常见的应用是作为HTMLDocument实例的document对象。通过这个文档对象,不仅可以取得与页面相关的信息,而且还能操作页面的外观和它底层的结构。 虽然DOM标准规定Document节点的子节点可以是DocumentType、、Element、ProcessingInstruction或Comment,但还有两个内置的访问它的子节点的快捷方式。第一个是documentElement属性,该属性始终指向HTML页面的 <html> <body> </body> </html> 上面的页面经过浏览器解析之后,其文档中只包含一个子节点,及 //取得<html>元素的引用 var html = document.documentElement; alert(html === document.childNodes[0]); //true alert(html === document.firstChild); //true 上面的例子说明, 作为HTMLDocument的实例,document对象还有一个body属性,直接指向 var body = document.body; 所有的浏览器都支持 Document另外一个可能的子节点是DocumentType,通常将 var doctype = document.doctype; //获取<!DOCTYPE>的引用 document对象是的一个属性。当窗口划分为几个框架的时候,每一个框架都是window对象的一个属性,框架本身实际上也是window对象的一个实例。document对象的常用属性如下表所示:
上面列出的是一些常用的document属性,要查看当前浏览器支持的所有document属性,可以使用下面的方法: var attrs = new Array(); for(var property in window.document) { attrs.push(property); attrs.sort(); } document.write("<table>"); for(var i=0;i<attrs.length;i++){ if(i == 0){ document.write("<tr>"); } if(i > 0 && i%5 == 0){ document.write("</tr><tr>"); } document.write("<td>" + attrs[i] + "</td>"); } document.write("</table>"); 上面的代码会将当前浏览器支持的document属性按字母排序后移表格的方式打印在页面中。 在上面的document对象的属性中, //取得完整的URL地址 var URL = document.URL; //取得域名 var domain = document.domain; //取得来源页面的URL var referrer = document.referrer; 在DOM的应用当中,最常见的操作时取得某个或某组元素的引用,然后再执行一些操作。取得元素的操作可以通过document对象的以下一些方法来完成。
第一个方法 <input type="text" name="someId" value="text value"> <div id="someId">div</div> 当使用 另一个经常使用的方法是 var images = document.getElementByTagName("img"); 与NodeList相似,可以使用方括号语法或 alert(images.length); //图片的数量 alert(images[0].src); //第一张图片的src属性 alert(images.item(0).src); //第一张图片的src属性 HTMLCollection对象还有一个方法:namedItem(),使用这个方法可以通过元素的name属性取得集合中的项。例如上面的图片集合中,如果有一张图片的name属性为 <img src="demoimg.jpg" name="mypic"> 那么就可以通过下面的方法从images变量中获取这张图片: var mypic = images.namedItem("mypic"); 如果想要获取页面中的所有元素,可以通过在 var allElements = document.getElementByTagName("*"); 第3个获取元素的方法是HTMLDocument特有的方法: <ul> <li><input type="text" name="author" value="author1"></li> <li><input type="text" name="author" value="author2"></li> <li><input type="text" name="author" value="author3"></li> </ul> var authors = document.getElementByName("author"); 上面的代码会返回所有的 除了上面的三个查找元素的方法之外,在HTML5向Web API新引入了新的document.querySelector和document.querySelectorAll方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。 这两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。 element = document.querySelector('selectors'); elementList = document.querySelectorAll('selectors'); 其中参数selectors 可以包含多个CSS选择器,用逗号隔开。 element = document.querySelector('selector1,selector2,...'); elementList = document.querySelectorAll('selector1,selector2,...'); 使用这两个方法无法查找带伪类状态的元素,比如
element = document.querySelector('div#container');//返回id为container的首个div element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时(no-live)的,想要区别什么是实时非实时的返回结果,请看下面的例子: <div id="container"> <div></div> <div></div> </div> //首先选取页面中id为container的元素 container=document.getElementById('#container'); console.log(container.childNodes.length)//结果为2 //然后通过代码为其添加一个子元素 container.appendChild(document.createElement('div')); //这个元素不但添加到页面了,这里的变量container也自动更新了 console.log(container.childNodes.length)//结果为3 通过上面的例子就很好地理解了什么是会实时更新的元素。 document对象可以将输出流写入到网页中,它有4个方法: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p>当前的时间为: <script type="text/javascript"> document.write("<strong>"+(new Date()).toString()+"</strong>"); </script> </p> </body> </html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com