访问HTML中元素的方法

最新推荐文章于 2024-03-27 23:50:16 发布

原创最新推荐文章于 2024-03-27 23:50:16 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#html #DOM

HTML 同时被 2 个专栏收录

18 篇文章

订阅专栏

JavaScript

17 篇文章

订阅专栏

1、根据ID访问HTML元素

<!DOCTYPE html>
<html>
    <head>
        <title>访问html元素</title>
        <script type="text/javascript">
            function getContent(){
               alert(document.getElementById("book").innerHTML+"\n"+document.getElementById('textContent').value); 
            }
        </script>
    </head>
    <body>
        <div id="book">鲁滨逊漂流记</div>
        <textarea rows="5" cols="20" id="textContent">
            jsdoigjeojglsjgljeigjeljgeiisjjsgjle
        </textarea><br/><br/>
        <input type="button" value="访问两个元素的内容" onclick="getContent();"/>
    <body>
</html>

这里写图片描述
2、利用节点关系访问HTML元素
parentNode:返回当前节点的父节点
previousSibling:返回当前节点的前一个兄弟节点
nextSibling:返回当前节点的后一个兄弟节点
childNodes:返回当前节点的所有子节点
getElementsByTagName(tagName):返回当前节点的具有指定标签名的所有子节点
firstChild:返回当前节点的第一个子节点
lastChild:返回当前节点的最后一个子节点

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
        <title>根据节点关系访问HTML元素</title>
        <style type="text/css">
            .selected{
                background-color:#66f
            }
        </style>

    </head>
    <body>
        <ol id="fruits">
            <li id="orange">橘子</li>
            <li id="banana">香蕉</li>
            <li id="litchi" class="selected">荔枝</li>
            <li id="pineapple">菠萝</li>
            <li id="coco">椰子</li>
        <ol>
        <input type="button" value="父节点" onclick="change(curTarget.parentNode);"/>
        <input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
        <input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/>
        <input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/>
        <input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling.previousSibling);"/>
        <script type="text/javascript">
            var curTarget=document.getElementById("litchi");
            var change=function(target){
                alert(target.innerHTML);
            }
        </script>
    </body>
</html>

这里写图片描述