网络安全--PHP编程与系统开发-06-JavaScript元素定位

认证搬砖大师

已于 2022-08-10 00:44:25 修改

阅读量240

点赞数

分类专栏：网络安全文章标签： javascript 前端开发语言

于 2022-08-09 01:00:45 首次发布

本文链接：https://blog.csdn.net/m0_70568918/article/details/126238675

版权

网络安全同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

一，DOM操作

JavaScript直接操作页面元素的方法集合，称为DOM(document object model)，是一套JS代码接口。另外，还有一套BOM(brower object model)，用于通过JS直接操作浏览器，比如前进，后退，历史，导航，刷新等。

二，JS定位元素

JS代码执行顺序

<script type="text/javascript">
        //获取一个元素（定位，选择）
        //定位一个变量，使用var标记，并给他赋值为计算器的标题，innerHTML为该元素的属性。
        var calTitle = document.getElementById("calc-title").innerHTML;
        window.alert(calTitle);
        

    </script>
</head>
<body>
    <!-- 头部 -->
    <div id="top">
        <div class="point red"></div>
        <div class="point blue"></div>
        <div class="point green"></div>
        <div id="calc-title">计算器</div>
    </div>

JS的元素定位

//通过ID定位到对应的元素，是单数形式，返回就是改元素本身
getElementById("calc-title").innerHTML; //JS中通过其他方式来获取元素
getElementsByClassName("point"); //得到3个class=point的元素，返回一个包括3个元素的数组
getElementsByName("result");//获取到name=result的1个元素，返回一个包含1个元素的数组
 var result = document.getElementsByName("result")[0].innerHTML
        window.alert(result);
getElementsByTagName("div");
JS中也可以通过Xpath
XPath即为XML路径语言（XML Path Language），它是一种用来确定XML文档中某部分位置的语言。
XML:可扩展标记语言，（eXtensible markup language）,HTML:超文本标记语言
HTML:用于描述页面元素，所有标记都可以事先约定（W3C）好，浏览器厂商统一支持。

XML:用于描述一组数据，标记可以任意定义，类似于数据库当中的行和列

比如下面描述的两本书：
<bookstore>
<book id="1001">
  <title>Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</price>
</book>
<book id=1002>
  <title>Harry Potter</title>
  <author>J K. Rowling</author>
  <year>2005</year>
  <price>29.99</price>
</book>

</bookstore>

以下XPATH的事例说明

//a[@href] 表示当前页面中所有的超链接中href属性的元素
var result = document.evaluate("//a[@href]", document, null, XPathResult.ANY_TYPE, null);
//div[@id='xxx'] 表示当前页面中所有DIV元素中，id="xxx"的元素
nodes=document.evaluate("//div[@id='xxx']", document).iterateNext();

以下是代码事例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV计算器</title>
    <style>
        /* 设置顶部标题栏样式 */
        #top{
            width: 450px;
            height: 50px;
            margin: auto;
            /* border-radius: 5px; */
            background-color: grey;
            border-top-left-radius: 10px; /*左上角圆弧*/
            border-top-right-radius: 10px; /*右上角圆弧*/
        }
        #top .point{
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            margin-top: 15px;
            border-radius: 10px;
        }
        #top .red{
            background-color: red;
        }
        #top .blue{
            background-color: blue;
        }
        #top .green{
            background-color: green;
        }
        #calc-title{
            float: right;
            margin: 10px 10px 0 0;
            font-size: 22px;
            color: white;
                
        }
        /* 设置结果栏样式 */
        #result{
            width: 446px;
            height: 50px;
            margin: auto;
            background-color: grey;
            border: solid 2px grey;
            
        }
        #result div{
            width: 440px;
            height: 46px;
            margin: auto;
            background-color: aliceblue;
            
        }
        /* 按钮区域的样式 */
        #button{
            width: 450px;
            height: 400px;
            background-color: gray;
            margin: auto;
        }
        #button div{
            width: 108px;
            height: 73px;
            float: left;
            margin-top: 2px;
            background-color: aqua;
            border: solid 2px gray;
            line-height: 80px; 
            text-align: center;  /*文字内容水平居中*/
            font-size: 22px;
        }
        /* 鼠标悬停效果 */
        #button div:hover{
            background-color: coral;

        }
    </style>
    <!-- 表示下面是JS代码 -->
    <script type="text/javascript">
        //获取一个元素（定位，选择）
        //定位一个变量，使用var标记，并给他赋值为计算器的标题，innerHTML为该元素的属性。
       //被函数包裹的代码，如果没有触发条件就不会调用执行。
        function alertitle(){
        //在函数体中，变量之前加var,表示是当前函数内部的局部变量，否则视为全局变量。
        //所以，建议无论在那个位置的代码，都加上var，否则会导致标量混乱。
        var calTitle = document.getElementById("calc-title").innerHTML;
        window.alert(calTitle);
        var result = document.getElementsByName("result")[0].innerHTML
        window.alert(result);
       }

       //JS中通过其他方式来获取元素
    //    document.getElementsByClassName("point"); //得到3个class=point的元素
    //    document.getElementsByName("result");//获取到name=result的1个元素
    //    document.getElementsByTagName("div");
       
    </script>
</head>
<!-- onload元素时间，页面加载完成之后自动执行 -->
<body onload="alertitle()">
    <!-- 头部 -->
    <div id="top">
        <div class="point red"></div>
        <div class="point blue"></div>
        <div class="point green"></div>
        <div id="calc-title">计算器</div>
    </div>
    <!-- 结果 -->
    <div id="result">
        <div></div>
    </div>
    <!-- 按钮 -->
    <div id="button">
        <!-- onclick：当元素被点击时执行元素 -->
        <div onclick="alertitle()">AC</div>
        <div>+/-</div>
        <div>%</div>
        <div>/</div>

        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>*</div>

        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>-</div>

        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>+</div>

        <div>0</div>
        <!-- ondblclick：当元素被双击时执行代码 -->
        <div ondblclick="alertitle()">删除</div>
        <div>.</div>
        <div>=</div>
    
    </div>
</body>
</html>

认证搬砖大师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网络安全--PHP编程与系统开发-06-JavaScript元素定位

JavaScript直接操作页面元素的方法集合，称为DOM(document object model)，是一套JS代码接口。另外，还有一套BOM(brower object model)，用于通过JS直接操作浏览器，比如前进，后退，历史，导航，刷新等。
复制链接

扫一扫