前端-part6-DOM查找标签以及JS操作样式绑定事件

原创

少年包青菜

修改于 2020-07-29 14:43:02

4K0

修改于 2020-07-29 14:43:02

1.location的用法和弹出框处理

location.href // 可以用于获取当前的URL
location.href="http://www.baidu.com"  // 这种组合可以跳转到指定的页面

alert("这是一个弹出框");
confirm("你确定吗？");
prompt("输入点什么吧");

2.及时相关的行为

var t1 = setTimeout("alert('对不起, 要你久候')", 3000 )  // 第一个参数代表行为，第二个代表过多久执行这个动作
clearTimeout(t1) // 用 t1 接收 setTimeout  这里的clearTime() 可以取消任务，即上面一句代码将不被执行

var t1 = setInterval('alert("Hello");', 3000);  // 每隔 3000 毫秒就弹出一个框
clearInterval(t1) // 可以取消这个循环的任务

3.document通过变迁属性查找标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>

<div id="d1">我是ID值为的div文本</div>

<p class="c1">我的class是c1</p>
<p class="c1">我的class也是c1</p>


<hr>

<div id="d2">
    <p>d2里面的第一个p标签</p>
    <p>我是ID为3的前面一个标签</p>
    <div id="d3">我的ID值是d3</div>
    <p>我是ID为3的后面一个标签</p>
    <p>d2里面最后一个p标签</p>
</div>

<hr>

<img src="" alt="" id="i1">
</body>
</html>

document.getElementById("d1"); // 通过原生 JS 查找 ID 是 "d1" 的标签
document.getElementById("d1").innerText; // 查找 ID 是 "d1" 的标签里面的文本信息

var c1Ele = document.getElementsByClassName("c1"); // 查找 class 是 "c1" 的所有元素
c1Ele[0]; // 查询到指定的元素

document.getElementsByTagName("p"); // 通过标签名查找，一般都是一组标签被找出

var d2Ele = document.getElementById("d2"); // 这里代表我已经定位到了 ID 是 "d2" 的父标签，往上看，有的
d2Ele.children // d2Ele 代表定位到父标签，因此 .children 代表查出下面的所有子标签
d2Ele.firstElementChild1 // 这个代表该父标签下的第一个子标签
d2Ele.lastElementChild // 这个代表的是该父标签下的最后一个子标签
 
var d3Ele = document.getElementById("d3"); 
d3Ele.parentElement // 这里代表找到他的父标签
d3Ele.previousElementSibling // 这里将找到他的前面的一个标签
d3Ele.nextElementSibling // 这里将找到他的后面的一个标签

4.通过DOM追加和删除元素

var d2Ele = document.getElementById("d2");  // 首先先找到一个指定标签
var pElee = document.createElement("span"); // 再创建一个标签
pElee.innerText = "这是追加文字"; // 这里可以对被创建的标签做一下修饰
d2Ele.appendChild(pElee); // 指定标签追加创建的标签，即可在 Elements 里面看到了

d2Ele.insertBefore(被插入标签，指定标签) // 在指定标签前面插入
d2Ele.removeChild(被删除标签) // 删除一个指定的子标签

5.对标签的识别并插入

d2Ele.innerText = "<p>hehe</p>" // 插入时不能识别标签，标签也被当做文本被插入
d2Ele.innerHTML = "<p>hehe</p>" // 插入时可以识别标签，标签将被识别，不会被当做文本插入

6.操作页面的样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的操作样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .c {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            background-color: red;
        }

        .c1 {
            background-color: green;
        }

    </style>
</head>
<body>
<div id="d1" class="c c1"></div>
<!--这里 class 使用两个样式，通过 JS 使其生效或者失效达到样式切换的效果-->

<input id="d2" type="button" value="点我">
<script>
    <!--这里开始对按钮的操作-->
    var d2Ele = document.getElementById("d2");  // 首先先要找到这个按钮
    d2Ele.onclick = function () { // 按钮的 onclick 属性在被点击时触发这个函数
        console.log(this);
        var d1Ele = document.getElementById("d1");  // 这个函数就是定位到需要操作的样式，并且对这个样式进行操作
        d1Ele.classList.toggle("c1");

    }

</script>
</body>
</html>

var d1Ele = document.getElementById("d1"); // 首先先要找到，这个里面的 class 有连个渲染，分别是 c 和 c1
d1Ele.classList // 调用 classList 方法可以查看其中的class属性值
d1Ele.classList.remove("c1") // 移除其中一个
d1Ele.classList.add("c1") // 增加一个
d1Ele.classList.contains("c1") // 即判断 classlist 是否包含这个 c1
d1Ele.classList.toggle("c1") // 切换对应属性值

7.鼠标焦点事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的鼠标指定事件</title>
</head>
<body>
<input id="d1" type="text" value="这是里面的默认值哟">
<script>
    var d1Ele = document.getElementById("d1");
    d1Ele.onfocus = function(){
        this.value = "";  // 鼠标点在输入框里面的时候的样式，输入框里面就为空
    };
    d1Ele.onblur = function () {
      this.value = "这里面是默认值";  // 当鼠标离开输入框点击别处的时候的样式，输入框里面就会有默认值
    }
</script>
</body>
</html>

8.select联动标签事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>我的select联动方法</title>
</head>
<body>
<label for="s1">省份</label><!--定义一个省的下拉框-->
<select id="s1">
    <option value="">-请选择省份-</option>
</select>
<label for="s2">市</label><!--定义一个市的下拉框-->
<select id="s2"></select>

<script>
    var data = {
        "北京": ["昌平区", "海淀区", "朝阳区"],
        "上海": ["浦东区", "徐汇区", "浦东新区"],
        "山东": ["烟台", "青岛", "威海"]
    };
    var d1Ele = document.getElementById("s1"); <!--首先定位到这两个下拉框-->
    var d2Ele = document.getElementById("s2");
        for (var i in data){
            var newEle = document.createElement("option"); // 首先先创造一个元素变量
            newEle.innerText = i; // 将循环到的 i 依次赋值给 newEle
            newEle.value = i; // 给 option标签 的 value="" 赋值
            d1Ele.appendChild(newEle); // 依次将这个元素添加进下拉框
        }
        d1Ele.onchange = function () { // 在下拉框1发生变化的时候，市级发生变化
            d2Ele.innerHTML = ""; // 首先将清空第二个下拉框的值，不然省级换一次，市级会叠加
            console.log(this.value); // this 代表触发这个时间的标签，就是 d1Ele
            var  n = this.value; // 此时我们获得了具体的省
            var cityList = data[n]; // 此时我们获得了城市列表

            for (var m in cityList){  // 千万注意！！！！这里的 m 只是城市列表的索引
                console.log(m);
                var newCity = document.createElement("option");
                newCity.innerText = cityList[m]; // 依次添加城市，再次注意，这里的 m 是索引
                d2Ele.appendChild(newCity)
            }
        }

</script>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

document