JavaScript中DOM中节点获取

最新推荐文章于 2022-08-17 09:25:15 发布

dancheng_work

最新推荐文章于 2022-08-17 09:25:15 发布

阅读量555

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/dancheng1/article/details/77018164

版权

JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

具体操作方法：

document.getElementById(id属性值);

document.getElementsByTagName(tag标签名称);

document.getElementsByName(name属性值);不推荐，有浏览器兼容问题,通常应用在form表单里边。

1、document.getElementById获取属性值

<body>
    <h2>获取元素结点</h2>
    <input type="text" id="username" value="tom" /> <br/>
    <input type="text" id="useremail" value="tom@163.com"> <br/>
</body>
</html>
<script type="text/javascript">
    //1、document.getElementById获取属性值
    var username = document.getElementById('username');
    console.log(username);
    var useremail = document.getElementById('useremail');
    console.log(useremail);
</script>

效果图：

2、document.getElementsByTagName(), tag标签获取属性值

<body>
    <h2>获取元素结点</h2>
    <input type="text" id="username" value="tom" /> <br/>
    <input type="text" id="useremail" value="tom@163.com"> <br/>
    <div>today is very good</div>
</body>
</html>
<script type="text/javascript">
    //1、document.getElementsByTagName(), tag标签获取属性值
    var hh = document.getElementsByTagName('h2');
    //通过getElementsByTagName获得的事一个数组（即使只有一个结点，也用数组返回）
    console.log(hh[0]);

    var input = document.getElementsByTagName('input');
    console.log(input);
    console.log(input[0]);
</script>

效果图：

3、DOM文本结点获取

<body>
    <h2>文本结点获取</h2>
    <input type="text" id="username" value="tom" /> <br/>
    <input type="text" id="useremail" value="tom@163.com"> <br/>
    <div>today is very good</div>
</body>
</html>
<script type="text/javascript">
    //1、获得div内部的文本结点
    var dv = document.getElementsByTagName('div')[0];
    //firstChild获得第一个子节点/lastChild获得第二个子节点
    console.log(dv.firstChild);
    console.log(dv.firstChild.wholeText);   //获得文本信息
</script>

效果图：

4、兄弟结点

firstChild、lastChild：父节点获得第一个、最后一个子节点

nextSibling：获得下个兄弟结点

oreviousSibling：获得上个兄弟结点

childNodes：获得所有父节点内部全部子节点信息

以上属性在主流浏览器(火狐firefox、chrome、safari、opera)中会给考虑空白节点。在IE浏览器中不考虑。

<body>
    <h2>兄弟结点获取</h2>
    <ul>
        <li>red</li>
        <li>blue</li>
        <li>green</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    //firstChild、lastChild、nextSibling、oreviousSibling、childNodes
    var ull = document.getElementsByTagName('ul').item(0);
    console.log(ull.childNodes);
    console.log(ull.childNodes.length);
    console.log('---------------------------------------------------------');
    console.log(ull.firstChild);    //在火狐中第一个是空白结点
    console.log(ull.firstChild.nextSibling);      //第二个结点才是li结点
    console.log('---------------------------------------------------------');
    console.log(ull.lastChild);
    console.log(ull.lastChild.previousSibling);
</script>

效果图：

5、获取父结点

结点：parentNode

<body>
    <h2>兄弟结点获取</h2>
    <ul>
        <li>red</li>
        <li>blue</li>
        <li>green</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    var blue = document.getElementsByTagName('li')[1];
    console.log(blue);
    console.log(blue.parentNode);
    console.log(blue.parentNode.parentNode);
    console.log(blue.parentNode.parentNode.parentNode);
    console.log(blue.parentNode.parentNode.parentNode.parentNode);
    console.log(blue.parentNode.parentNode.parentNode.parentNode.parentNode);
</script>

效果图：

dancheng_work

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript中DOM中节点获取

具体操作方法：document.getElementById(id属性值);document.getElementsByTagName(tag标签名称);document.getElementsByName(name属性值);不推荐，有浏览器兼容问题,通常应用在form表单里边。1、document.getElementById获取属性值获取元素结点
复制链接

扫一扫

专栏目录