python笔记(web前端 JS 的 BOM 和 DOM)

一、BOM
‘’’
1、windows常用一些方法
在这里插入图片描述
2、navigator对象
3、screen对象和history对象
4、 location对象

location.href 获取当前网址
location.href = “http://www.baidu.com” 跳转指定网址
location.reload() 重新加载

5、

6、计时

二、DOM
在这里插入图片描述

1、直接查找标签：

通过id查找（有且只能找到一个）：document.getElementById("d1")
通过class查找（找到的可以是多个）：document.getElementsByClassName("c1")
根具标签名查找（找到的可以是多个）：document.getElementsByTagName("p")

2、间接查找：
在这里插入图片描述
2、创建节点

3、添加节点：

4、删除和替换节点

5、获取值

6、属性：

1、.属性名 = “属性值”
2、自定义属性只能用：
.setAttribute("s9","xixi") ：设置属性
.getAttribute("s9") ：获取属性
.removeAttribute("s9") ：删除指定的属性
在这里插入图片描述

7、文本操作：

设置文本内容：
```
xxx.innerText = ""
```
设置标签内容：
```
xxx.innerHTML =" <p>我是p标签</p>"
```
获取值的区别：
1.innerText ：只取文本内容
2.innerHTML ：子标签和子标签文本内容都取
获取值（input/select/`textarea）:
```
      input标签.value
      select标签.value
      textarea标签.value
```

8、样式操作：

通过class名去改变样式
获取标签所有样式：
1. className -->得到字符串
2. classList -->得到的是数组
使用classList操作样式：
1. .classList.contains("样式类") -->判断包不包含指定样式类
2. .classList.add("样式类") -->添加指定的样式类
3. .classList.toggle("样式类") -->有就删除没有就添加
4. .classList.remove("样式类") -->删除指定样式类
指定CSS操作

在这里插入图片描述
8、通用事件
注意：涉及DOM操作的JS代码要放在body标签内部最下面

常用事件：
1、onclick
2、ondbclick
3、onfocus
4、onblur
5、onchange
绑定事件的方式
1、在标签里直接写属性（onclick = foo()）
2、通过JS给标签绑定事件
this–>代表的是触发事件的当前标签

三、DOM练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM查找标签</title>
</head>
<body>

<div id="d1">div</div>
<p class="c1">p标签</p>
<p class="c2"></p>
<form action="">
    <lable>用户名
        <input type="text" name="username" id="i1">
        <input type="button" id="start" value="开始">
        <input type="button" id="stop" value="停止">
    </lable>

    <lable>
        <input type="text" value="要开心鸭!" id="i2">
        <input type="button" id="" value="搜索">
    </lable>
    
    <lable>男
        <input name="gender" value="0" type="radio">
    </lable>
    
    <lable>女
        <input name="gender" value="1" type="radio">
    </lable>
    
    <select name="from" id="s1">
        <option >--请选择</option>
        <option value="000">北京</option>
        <option value="001">上海</option>
        <option value="010">陕西</option>
    </select>

    <select name="loction" id="s2">

    </select>
    <textarea id="t1" name="memo"  cols="30" rows="10">

    </textarea>
</form>

<script>
    //作业练习：
    /*
    1、在input框内显示当前时间
    var t;
    function foo()
    {
        //1、获取当前时间
        var NowTime = new Date();
        var nowstr = NowTime.toLocaleString();
        //2、把时间放进框内
        var i1Ele = document.getElementById("i1");
        i1Ele.value = nowstr;
    }
    //3、点开始让时间动起来（找到开始按钮给它绑定事件）
    var StartButton = document.getElementById("start");
    StartButton.onclick = function()
    {
        if (t == undefined)
            t = setInterval(foo,1000) // 1000毫秒执行一次
    }
    //4、点开始让时间动起来（找到开始按钮给它绑定事件）
    var StopButton = document.getElementById("stop");
    StopButton.onclick = function()
    {
        clearInterval(t) // 清除t事件(清除t对应的定时器但是t的那个值还在)
        t = undefined
    }*/
    /*
    //2、搜索框示例
    var i1Ele = document.getElementById("i2");
    i1Ele.onfocus = function() //鼠标在框内点击
    {
        this.value = ""; //把value清空
    }
    i1Ele.onblur = function()//鼠标是否在框外点击
    {
        if(!this.value.trim())//.trim:去空格
            this.value = "要开心鸭!";
    }*/
    //3、select联动
    //给第一个select绑定onchange事件

    var data = {"000":["北大","清华","北影"],
                "001":["小河","小溪","小湖"],
                "010":["西安","宝鸡","渭南"]}
    var s1Ele = document.getElementById("s1");

    s1Ele.onchange = function()
    {
        var areas = data[this.value];//获取当前数据
        var s2Ele = document.getElementById("s2")
        s2Ele.innerHTML = "" //清空上次的标签及内容
        for (var i = 0;i<areas.length;i++)
        {
            var opEle = document.createElement("option")//新建option标签
            opEle.innerText = areas[i];//添加内容
            s2Ele.appendChild(opEle);//添加标签
        }
    }
</script>

</body>
</html>

作业练习1展示页面：
在这里插入图片描述
作业练习3展示页面：

python笔记(web前端 JS 的 BOM 和 DOM)

猜你喜欢