PHP编程与系统开发之JavaScript元素定位

YhMjQx

于 2024-08-25 14:11:01 发布

阅读量516

点赞数 21

分类专栏： PHP编程与系统开发文章标签： php javascript 开发语言

本文链接：https://blog.csdn.net/YhMjQx/article/details/141528828

版权

PHP编程与系统开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

==JavaScript元素定位==
- 利用JavaScript实现计算器
- - 一、DOM操作

JavaScript元素定位

利用JavaScript实现计算器

一、DOM操作

JavaScript直接操作页面的元素的方法合集，称为DOM（Document Object Model），实际上就是页面当中利用JavaScript操作页面元素的方法的集合。是一套js代码接口，另外还有一套BOM（Browser Object Model），用于通过JS直接操作浏览器，比如前进，后退，历史，导航，刷新等。

    <!-- 下面是js代码 -->
    <!-- 获取一个元素（定位，选择） -->
    <!-- 定义一个变量，使用 var 标记，在这里给他赋值为计算器的标题，innerHTML表示为该元素的值 -->
    <!-- 被函数体包裹的代码，如果没有触发条件或调用，则代码不会被执行 -->
    <script type="text/javascript">
        
        function alertclactitle() {
        // 在函数体中，变量之前加 var ，表示是当前函数内部的局部变量，如果不加则会被视为全局变量
        // 建议在函数体中都加上，否则会导致变量生命周期混乱
            var calctitle = document.getElementById("calc-title").innerHTML;
            window.alert(calctitle);
        }

        // JS中通过其他方式来获取元素
        // document.getElementsByClassName("point");   //获取到三个class=point的元素
        // document.getElementsByName("result");  //获取到name=result的1个元素
        // document.getElementsByTagName("div");  //获取到所有标签为div的元素
        // JS中也可以通过XPath来定义
    </script>
</head>
<body onload="alertclactitle()">
    <!-- onload 元素事件，页面加载完成之后则自动执行 -->
    <div id="top">
        <div class="point red"></div>
        <div class="point green"></div>
        <div class="point blue"></div>
        <div id="calc-title">DIV版蜗牛计算器</DIV></div>
    </div>

    <div id="result-out" name="result">
        <div id="result-in">

        </div>
    </div>
    
    <div id="button">
        <!-- onclick 当前元素被单机时，调用alertclactitle() 这个函数 -->
        <div onclick="alertclactitle()">AC</div>

**值的注意的是，一般情况下，我们需要将js代码包裹成函数，否则也会造成代码执行混乱，最终无法达到我们想要的结果。**就拿着一段代码来说，如果我蒙了没有将js代码包裹成函数，而是直接写，那么就会先执行js代码，然后再渲染元素，但是既然元素都没有渲染，js又从何去寻找我们想要的数据呢

解决办法：

方法一：就如同上面的方法一样，将js代码包裹成函数

此时函数其实和C语言中的意思差不多，调用方式也差不多。都是在内存中有一块地址，调用时就是利用该地址寻找

方法二：将js代码放在元素渲染之后

<body>
    <div id="top">
        <div class="point red"></div>
        <div class="point green"></div>
        <div class="point blue"></div>
        <div id="calc-title">DIV版蜗牛计算器</DIV></div>
    </div>

    <div id="result-out" name="result">
        <div id="result-in">

        </div>
    </div>
    
    <div id="button">
        <div>AC</div>
        
<script type="text/javascript">
    var calctitle = document.getElementById("calc-title").innerHTML;
    window.alert(calctitle);
</script>

JS的元素定位

// getElementById 为单数，通过此函数最终的返回结果就是该元素本身
document.getElementById("calc-title").innerHTML;

document.getElementsByClassName("point");   //获取到三个class=point的元素。此时getElementsByClassName是复数，最终的返回结果是一个数组

document.getElementsByName("result");  //获取到name=result的1个元素。此时getElementsByName是复数，最终的返回结果是一个数组。此时就需要使用数组的下标来获取元素

document.getElementsByTagName("div");  //获取到所有标签为div的元素。此时getElementsByTagName是复数，最终的返回结果是一个数组。此时就需要使用数组的下标来获取元素




document.getElementsByTagName("div")[0];  //就表示该返回数组的第一个元素
document.getElementsByTagName("div")[0].innerHTML;  //就表示该返回数组的第一个元素所包含的值

XPath

JS也可以通过XPath来定义
XML：可扩展标记语言（extension Markup Language）。用于描述一组数据，标记可以自己任意定义，类似于数据库当中的行和列
HTML：超文本标记语言，用于描述页面元素，所有标记都是实现约定好的（W3C组织），浏览器厂商统一支持

比如下面用XML描述了两本书

<bookstore>
	<book id="1001">
    	<title>Harry Potter</title>
        <author>] K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book id="1002">
    	<title>Harry Potter</title>
        <author>] K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
</bookstore>

就类似于这么个布局

以下XPATH的示例说明

var result = document.evaluate("//a[@href]", document, nul1, xpathResult.ANY_TYPE, nu11);
//   //a[@href]  表示当前页面中所有的超链接（标签为 a ），具有href属性的元素

nodes=document.evaluate("//div[@id='xxx']", document).iterateNext();
//   //div[@id='xxx']  表示当前页面中，所有标签为div的元素中，id='xxx'的元素