获取DOM节点的常用方法

程序员文章站 2024-03-24 09:46:16

...

DOM操作是为了方便程序员操作页面元素。
常见的DOM节点有：
元素节点，即HTML标签
文本节点，即标签里面的内容包含空格
属性节点即标签里面的属性比如 a标签有 href href就是属性节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素节点</title>
</head>
<script type="text/javascript">
    window.onload=function(){
        var o=document.getElementById('box');
        var cs=o.childNodes;//获取所有子节(包含属性节点,文本节点)
        //这里注意返回的是字节列表  通过下标可以获取,这里下标是从 0开始 
        console.log(cs);//字节列表
        console.log(cs[0]);//空格是text类型的  下标0是第一个节点 
        cs[1].innerHTML="名字";//把内容写入第2个节点
        cs[3].style.color="red";//改变第4个节点的文字颜色

        var fc=o.firstChild;//获取第一个子节点
        console.log(fc);

        var d=o.lastChild;//获取最后一个子节点
        console.log(d);
        console.log(o.parentNode);//获取当前元素节点的父节点
        console.log(o.previousSibling);//获取当前节点的前一个同级节点(上一个)
        console.log(o.nextSibling);//获取当前节点的后一个同级节点（下一个）
        var i=o.previousSibling.previousSibling;//上一个的上一个    连缀
        console.log(i);
    }
</script>
<body>
    <p></p>
    <div id="box">
        <div><a href=""></a>嘿嘿</div>
        <div><a href=""></a>哈哈哈</div>
    </div>
    <b></b>
</body>
</html>

以上运行结果
获取DOM节点的常用方法

操作一个节点首先要获取到
var o=document.getElementById(‘box ‘); 存在变量o 中
总结获取节点的所有方法：
childNodes 获取所有子节点返回值是listNode 子节点列表通过下标获取
firstChild 获取当前节点的第一个节点
lastChild 获取当前节点的最后一个节点
parentNode 获取当前节点的父节点
previousSibling 获取当前的节点前一个同级节点，兄弟节点（上一个）
nextSibiling 获取当前节点后一个同级节点（下一个）

同时获取上一个或者下一个的时候可以用连缀比如上面代码
var i=o.previousSibling.previousSibling; 获取div的上一个元素节点的上一个
o的上一个节点是空格 text , text上一个是p标签所以它是p
获取DOM节点的常用方法

获取DOM节点的常用方法

DOM 中文档节点，文本节点之间的关系