文档对象模型(Docuement Object Model,简称DOM),是W3C组织推荐的处理XML的标准适配器。文档内容按照规定的格式标准按层级布局。
由于文档内容是按标准格式进行布局,我们可以利用Javascript DOM 来查找并控制对应标签元素的属性及行为。
例如:
<div id=”news”>some news list here</news>
如果想取得上面代码中的标签(news)只需在Javascript中调用 var news= document.getElementsById("news");
但是我们经常遇到
- 标签元素无 id 属性;
- 标签元素无 class属性;
- 需要控制一个标签的集合,例如我想定义所有Footer部分的<a>标签的属性及行为。
下面举例子说明
<div id="header"> <h1>任鸟飞网页设计</h1> </div> <div id="sidebar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">简介</a></li> <li><a href="#">业务</a></li> <li><a href="#">联系</a></li> </ul> </div> <div id="content"> <h2>任鸟飞网页设计</h2> <p><a href="#">任鸟飞网页设计</a> 设计类门户网站<p> <p><span style="color: red;">任鸟飞网页设计</span> 设计类门户网站</p> </div> <div id="footer"> <p>版权所有| <a href="#">联系我们</a> | <a href="#">隐私条款</a> | <a href="#">政策条款</a></p> </div>
在整个文档中取出所有a标签,代码如下:
var myLinkCollection = document.getElementsByTagName("a"); for (i=0;i<myLinkCollection.length;i++) { // 根据需要来定为a标签的样式及行为}
从指定部分取出所有a标签,例如从footer中取出所有a标签,代码如下:
var myFooterElement = document.getElementById("footer"); var myLinksInFooter = myFooterElement.getElementsByTagName("a"); for (i=0;i<myLinksInFooter.length;i++) { // 定义footer部分所有a标签的样式及行为}
也可利用节点node的方法来实现:
var myLinkCollection = document.getElementsByTagName("a"); for (i=0;i<myLinkCollection.length;i++) { if (myLinkCollection[i].parentNode.parentNode.id === "footer") { // do something with footer anchor tags here } }
也可与增加限制条件,比如说只取得含有href属性的a标签,代码如下:
var myLinkCollection = document.getElementsByTagName("a"); for (i=0;i<myLinkCollection.length;i++) { if (myLinkCollection[i].getAttribute("href")) { // 定义含有href属性的a标签的样式和行为 } }
我们也可以利用Javascript定义标签的属性,例如标签,代码如下:
var myLinkCollection = document.getElementsByTagName("span"); for (i=0;i<myLinkCollection.length;i++) { if (myLinkCollection[i].getAttribute("style")) { // 直接定义span标签的样式属性 } }
标签:CSS JavaScript