javaweb 对document的一些查询方法和属性的测试

最新推荐文章于 2023-06-25 20:00:00 发布

孔雀南飞梦

最新推荐文章于 2023-06-25 20:00:00 发布

阅读量743

点赞数 1

分类专栏：笔记文章标签： intellij-idea java-ee

本文链接：https://blog.csdn.net/qq_52360788/article/details/119605016

版权

笔记专栏收录该内容

58 篇文章 0 订阅

订阅专栏

网页布局有点丑，因为还不是会弄这些css，凑合着看看

模仿网课弄的，但是没有源码，只能自己写了一个类似的测试，有些标签不一定跟网课上的一样，但是我们方法的测试是差不多的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>node</title>
    <style type="text/css">
        .aa{
            background-color: aquamarine;
            border: solid;
        }
    </style>
    <script type="text/javascript">
        //查找#bj节点
        function bjnode() {
            let elementById = document.getElementById("bj");
            let innerHTML = elementById.innerHTML;
            alert(innerHTML);
        }
        //查找所有td节点
        function td() {
            //aa
            let elementsByClassName = document.getElementsByClassName("aa");
            alert(elementsByClassName.length);
        }
        //查找name=gender的所有节点
        function getGender() {
            let elementsByName = document.getElementsByName("gender");
            alert(elementsByName.length);
        }
        //查找#city的所有子节点
        function getcitys() {
            //获取id为city的节点
            let elementById = document.getElementById("city");
            //通过city节点,再通过标签查询得到所有子节点
            alert(elementById.childNodes.length);

        }
        // 查找city下的所有td节点
        function citytds() {
            let elementsByTagName = document.getElementById("city").getElementsByTagName("td");
            alert(elementsByTagName.length);
        }
        //返回#phone的第一个子节点
        function phoneFirstNode() {
            let firstChild = document.getElementById("phone").firstChild;
            alert(firstChild.innerHTML);
        }
        //返回#bj的父节点
        function get_bj_parent() {
            let parentNode = document.getElementById("bj").parentNode;
            alert(parentNode.innerHTML)
        }
        //返回#Android的前一个兄弟节点
        function get_Android_front() {
            let previousSibling = document.getElementById("Android").previousSibling;
            alert(previousSibling.innerHTML);
        }
        //返回#username的value属性值
        function username_value() {
            let elementById = document.getElementById("username");
            alert(elementById.value);
        }
        //返回#bj的文本值
        function getText_bj() {
            let elementById = document.getElementById("bj");
            alert(elementById.innerText);
        }
        //设置#username的value属性值
        function setusername_value() {
            let elementById = document.getElementById("username");
            elementById.value="你好，世界！";
        }
    </script>
</head>
<body>
<!--getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。-->
<table align="center">
    <tr ><td colspan="3">你喜欢哪个城市？</td></tr>
    <tr id="city">
        <td class="aa" id="bj">北京</button></td>
        <td class="aa" id="sh">上海</td>
        <td class="aa" align="center" id="dj">东京</td>
        <td class="aa" id="se">首尔</td>
    </tr>
    <tr ><td colspan="3">你喜欢哪款单机游戏？</td></tr>
    <tr>
        <td class="aa">红警</td>
        <td class="aa">实况</td>
        <td class="aa">极品飞车</td>
        <td class="aa">魔兽</td>
    </tr>
    <tr ><td colspan="3">你手机的操作系统是？</td></tr>
    <tr id="phone"><td class="aa" id="Ios">Ios</td><td class="aa" id="Android">Android</td><td class="aa">windows Phone</td>
<tr></tr>
    <tr>
        <td>gender:</td>
        <td><input type="radio" name="gender">Male</td>
        <td><input type="radio" name="gender">Female</td>
    </tr>
    <tr><th>name:</th>
        <th colspan="3"><input type="text" id="username"></th>
    </tr>
</table>

<div><button onclick="bjnode()">查找#bj节点</button></div>
<div><button onclick="td()">查找所有li节点</button></div>
<div><button onclick="getGender()">查找name=gender的所有节点</button></div>
<div><button onclick="citytds()">查找city下的所有td节点</button></div>
<div><button onclick="getcitys()">查找#city的所有子节点</button></div>
<div><button onclick="phoneFirstNode()">返回#phone的第一个子节点</button></div>
<div><button onclick="get_bj_parent()">返回#bj的父节点</button></div>
<div><button onclick="get_Android_front()">返回#Android的前一个兄弟节点</button></div>
<div><button onclick="username_value()">返回#username的value属性值</button></div>
<div><button onclick="setusername_value()">设置#username的value属性值</button></div>
<div><button onclick="getText_bj()">返回#bj的文本值</button></div>
</body>
</html>

孔雀南飞梦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaweb 对document的一些查询方法和属性的测试

网页布局有点丑，因为还不是会弄这些css，凑合着看看模仿网课弄的，但是没有源码，只能自己写了一个类似的测试，有些标签不一定跟网课上的一样，但是我们方法的测试是差不多的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>node</title> <style type="text/css"> .
复制链接

扫一扫