JavaScript查找结点的方法，标签添加链接，全选全不选_javascript 选中文字加链接跨标签-CSDN博客

查找节点的方法

在这里插入图片描述

获取元素的方法	作用
document.getElementById(“id”)	通过id属性到唯一的元素如果页面上有多个同名的id，则得到第1个元素
document.getElementsByName(“name”)	通过name属性得到一组标签，返回一个数组
document.getElementsByTagName (“标签名”)	通过标签名字得到一组标签，返回一个数组
document.getElementsByClassName(“类名”)	通过类名得到一组标签，返回一个数组

给标签添加链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <script type="text/javascript">
        window.onload = function () {

            //根据标签名找元素
            var b2 = document.getElementById("b2");
            b2.onclick = function () {
                //返回的是一个数组对象
                var aNodes = document.getElementsByTagName("a");
                for (var index = 0; index < aNodes.length; index++) {
                    aNodes[index].href = "http://www.itcast.cn";
                }
            }

            //根据name的属性值找
            var b3 = document.getElementById("b3");
            b3.onclick = function () {
                //根据name的属性值找元素，返回一个数组对象
                var divs = document.getElementsByName("one");
                for (var index = 0; index < divs.length; index++) {
                    divs[index].innerHTML = "<a href='https://www.baidu.com/'>baidu.com</a>";
                }
            }

            var b4 = document.getElementById("b4");
            b4.onclick = function () {
                //根据class的属性值找元素，返回一个数组对象
                var divs = document.getElementsByClassName("two")
                for (var index = 0; index < divs.length; index++) {
                    divs[index].innerHTML = "<a href='https://www.google.com/'>Google.com</a>";
                }
            }

        }
    </script>
</head>
<body>
<input type="button" value="(通过标签名)给a链接添加地址" id="b2"/>
<input type="button" value="(通过name属性)给div设值" id="b3"/>
<input type="button" value="(通过类名)给div设值" id="b4"/>
<hr/>


<a>传智播客</a><br/>
<hr/>

<div name="one">百度</div>
<hr/>

<div class="two">谷歌</div>

</body>
</html>

在这里插入图片描述

实现全选/全不选，商品结算的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选/全不选
        function selectAll () {
//得到下面复选框的状态
            var all = document.getElementById("all");
//得到上面所有的复选框
            var items = document.getElementsByName("item");
            for (var i = 0; i < items.length; i++) {
                items[i].checked = all.checked;
            }
        }
        //反选
        function reverseSelect () {
//得到上面所有的复选框
            var items = document.getElementsByName("item");
            for (var i = 0; i < items.length; i++) {
                items[i].checked = !items[i].checked;
            }
        }
    </script>
</head>
<body>
<h3>商品价格列表</h3>
<input type="checkbox" name="item" value="1500" /> 山地自行车1500<br />
<input type="checkbox" name="item" value="200" /> 时尚女装200<br />
<input type="checkbox" name="item" value="3000" /> 笔记本电脑3000元<br />
<input type="checkbox" name="item" value="800" /> 情侣手表800<br />
<input type="checkbox" name="item" value="2000" /> 桑塔纳2000<br />
<hr/>
<input type="checkbox" id="all" onclick="selectAll()" />全选/全不选 &nbsp;
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>&nbsp;
</body>
</html>