DOM可以做什么?(二)

  

结合使用getElementById()和getElementsByTagName()

有时候我们可能不希望选中网页中的所有的段落,而是选中特定部分的段落(或者是其它元素)。其实我们可以借用以上两个函数来实现,例如如下的代码就会先找到id为content的元素,再进一步选中它内部的段落。

cparas = document.getElementById("content").getElementsByTagName("p");

点击一下下面的按钮,就可以看到都选中的哪些段落。留意本页左上角那个有边框而没有设置背景颜色的段落。由于它没有在id为content的div内,所以没有被选中。

=========================================================================================================================================

访问DOM节点3——通过节点关系

注意:DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问

如字面意思,parentNode用于访问父节点。firstChild和lastChild则分别用于访问某个节点的第一个子结点和最后一个子结点。其中,nodeName是只读的,元素节点的nodeName和标签名字一样,属性节点的nodeName就是该属性,文字节点的nodeName永远是#text,文档节点的nodeName是#document。

 

应用实例

HTML代码:

<div>
    <p id="test">我是第一个p的文字</p>
    <p id="test2">我是第二个p的文字,span的文字</p>
</div>

JavaScript代码

<script type="text/javascript">
function getTest(){
        var x = document.getElementById("test");
        x.style.border = "1px dashed";
}
function getParent(){
        var x = document.getElementById("test");
        x.parentNode.style.border = "1px dashed";
}
function getFirst(){
        var x = document.getElementById("test");
        alert(x.firstChild.nodeValue);
}
function getLast(){
        var x = document.getElementById("test");
        alert(x.lastChild.nodeValue);
}
</script>

 

实际效果:

我是第一个p的文字

我是第二个p的文字,span的文字

getTest()
getParent()
getFirst()
getLast()

其它访问DOM节点的属性

除了上面的parentNode、firstChild和lastChild,我们还有childNodes,它表示的是一个节点的所有子结点;而previousSibling和nextSibling则分别表示上一个和下一个相邻的节点。

 

 

=========================================================================================================================================

 



 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值