day35前端基础之BOM和DOM

day35前端基础之BOM和DOM

BOM操作

简介

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

window的子对象

一、window的子对象：navigator对象
    navigator.appName　　# Web浏览器全称
    navigator.appVersion　　# Web浏览器厂商和版本的详细字符串
    navigator.userAgent　　# 客户端绝大部分信息
    navigator.platform　　　# 浏览器运行所在的操作系统
二、location对象（#记住）
	window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
    location.href  # 获取URL
    location.href="http://www.baidu.com"  # 跳转到指定页面
    location.reload() # 重新加载页面

弹出框

一、弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
1、警告框
    警告框经常用于确保用户可以得到某些信息。
    当警告框出现后，用户需要点击确定按钮才能继续进行操作。
    用法：
    	alert('不能')
2.确认框（了解即可）
    确认框用于使用户可以验证或者接受某些信息。
    当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
    如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
    语法：
    	confirm('确定打开吗？')
3.提示框（了解即可）
    提示框经常用于提示用户在进入页面前输入某个值。
    当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
    如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
    语法：
    	prompt(("请在下方输入","你的答案"))

定时器

一、setTimeout()
    function f() {
        console.log('123')
    }
    setTimeout(f,3000) # 单位是毫秒，过3000毫秒在执行函数

# 清除定时器（关闭定时器）：
    let t = setTimeout(f,5000)
    clearTimeout(t)  # 不会打印

二、clearTimeout()
    function f() {
        console.log('123')
    }
    setInterval(f,2000)

# 清除定时器（关闭定时器）：
    let t = setInterval(f,200)
    clearInterval(t)

DOM操作

简介

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。

HTML DOM 树

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)　
JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

直接查找（重点****）

直接查找：
    document.getElementById           根据ID获取一个标签
    document.getElementsByClassName   根据class属性获取
    document.getElementsByTagName     根据标签名获取标签合集
一、id查找
    </body>
    <div id="d1">d1</div>
    <div id="de">d2</div>
    <script>
        var d1 = document.getElementById('d1')
        console.log(d1)
    </script>
    </body>
二、class属性查找
    </body>
    <div class="c1">d1</div>
    <div class="c1 c2">d2</div>
    <script>
        var d1 = document.getElementsByClassName('c1');
        var d1 = document.getElementsByClassName('c1')[0];  # 可以按索引取值
        var d1 = document.getElementsByClassName('c1')[1];
        console.log(d1)
    </script>
    </body>
三、标签名查找
    </body>
    <div class="c1">d1</div>
    <div class="c1 c2">d2</div>
    <script>
        var d1 = document.getElementsByTagName('div')
        var d1 = document.getElementsByTagName('div')[0]
        var d1 = document.getElementsByTagName('div')[1]
        console.log(d1)
    </script>
    </body>

间接查找

间接查找用法：
    parentElement            父节点标签元素
    children                 所有子标签
    firstElementChild        第一个子标签元素
    lastElementChild         最后一个子标签元素
    nextElementSibling       下一个兄弟标签元素
    previousElementSibling   上一个兄弟标签元素
一、父标签查找
    </body>
    <div id="d1" class="c1">
        dff
        <p class="p1">
            <span class="span1">span1</span>
        </p>
    </div>
    <div id="d2">
        222
    </div>
    <script>
        var span = document.getElementsByClassName('span1')[0]
        var div1 = span.parentElement.parentElement # 根据parentElement查找父标签
        console.log(div1)
    </script>
    </body>
二、子元素查找
    </body>
    <div id="d1" class="c1">
        <p class="p1">
            <span class="span1">span1</span>
        </p>
    </div>
    <div id="d2">
        222
    </div>
    <script>
        // var span = document.getElementsByClassName('span1')[0]
        // var div1 = span.parentElement.parentElement
        // console.log(div1)
        var div1 = document.getElementById('d1')
        var p = div1.children[0] # 根据子元素查找，取值用索引
        console.log(p)
    </script>
    </body>

节点操作

例子1：
    <body>
    <div id="d1">

    </div>
    <script>
        1.创建img标签
        var img = document.createElement('img');
        var div = document.getElementById('d1')

        2.设置属性，点语法只能添加标签自带的属性
        img.src = '1234.png';
        img.alt = '1234.png';

        #添加自定义属性需要用setAttribute
        img.setAttribute('name','meng')        # 自定义添加属性
        img.removeAttribute('name','meng')     # 删除属性
        console.log(img.getAttribute('name'))  # 获取信息

        3.把img标签放到div里面
        div.append(img)
        console.log(img)
    </script>
    </body>
例子2：
    </body>
    <div id="d1">
    </div>
    <script>
        1.创建标签
        var div = document.getElementById('d1');
        var a = document.createElement('a');

        2.设置属性
        a.href = 'http://www.baidu.com';
        a.target = '_blank';

        3.给a标签添加文本
        a.innerText = 'span>点我哦</span>';  # 把所有的内容都当成文本了
        a.innerHTML = 'span>点我哦</span>';  # 可以识别标签

        div.append(a);
        console.log(a)
    </script>
    </body>

获取值操作

    </body>
    <p>
        用户名：<input type="text" id="d1" value="meng">
    </p>
    <p>
        密码：<input type="password" id="d2" value="123456">
    </p>
    <select name="" id = "city">
        <option value="迪迦">动画</option>
        <option value="赛罗" selected>动漫</option>  # 默认这个

    </select>
    <script>
        var username = document.getElementById('d1').value;
        console.log(username)

        var password = document.getElementById('d2').value;
        console.log(password)

        var city = document.getElementById('city').value;
        console.log(city)
    </script>
    </body>

js class操作

用法：
    className  获取所有样式类名(字符串)

    classList.remove(cls)  删除指定类
    classList.add(cls)  添加类
    classList.contains(cls)  存在返回true，否则返回false
    classList.toggle(cls)  存在就删除，否则添加
代码：
    <div id="d1" class="c2">

    </div>
    <script>
        # 先找到标签
        var div = document.getElementById('d1') 

        # 增加class
        div.classList.add('c1') 

        # 删除
        div.classList.remove('c2')

        console.log(div.classList.contains('c3')) # 判断是否有该class

        # 有一个是添加，有两个为删除
        div.classList.toggle('c2')
        div.classList.toggle('c2')
    </script>
    </body>

js 操作css

</body>
<div id="d1" class="c1">div</div>
<script>
    var div = document.getElementsByTagName('div')[0]
    div.style.color = 'red';
    div.style.fontSize = '34px'
    div.style.border = '3px solid red'       # 设置全体边框
    div.style.borderLeft = '3px solid blue'  # 只设置左边框

</script>
</body>

绑定事件

绑定方法一：
    </body>
    <button onclick="f1()">点我</button>
    <script>
        function f1() {
            alert(123)
        }
    </script>
    </body>
第二种绑定方法：
    </body>
    <button class="btn">点我</button>
    <script>
        var btn = document.getElementsByClassName('btn')[0];
        btn.onclick = function () {
            alert(123)
        }
    </script>
    </body>

加载事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {  # 等所有的执行完后，在执行这串代码
            var btn = document.getElementsByClassName('btn')[0];
            btn.onclick = function () {
                alert(123)
            }
        }
    </script>
</head>
<body>
<button class="btn">点我</button>
</body>

开关灯示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width:200px;
            height: 200px;
            border-radius: 50%;
        }
        .bg_green{
            background: green;
        }
        .bg_red{
            background: red;
        }
    </style>
</head>
<body>
<div id="d1" class="bg_green bg_red "></div>
<button class="btn">点我</button>
<script>
    var btn = document.getElementsByClassName('btn')[0]
    var div = document.getElementById('d1')
    btn.onclick = function () {
        div.classList.toggle('bg_red')
    }
</script>
</body>
</html>

input获取焦点事件

</body>
<input type="text" id="d1" value="点我呀">
<script>
    var inp = document.getElementById('d1');
    # 获取焦点事件
    inp.onfocus = function () {
        inp.value = ''
    }
    # 失去焦点事件
    inp.onblur = function () {
        inp.value = '点我干啥'
    }
</script>
</body>

省市联动案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="pro">

</select>
<select name="" id="city">

</select>
<script>
	# 拿到数据
    var pro = document.getElementById('pro')
    var city = document.getElementById('city')
    var data = {
        "河北省": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
    }
    for (var key in data){ # key ==>河北省，北京，山东

        # 创建省的option
        var option = document.createElement('option') # 相当于<option ></option>

        # 设置属性
        option.value = key; # <option value='河北省'></option>
        option.innerText = key; # <option value='河北省'>河北省</option>

        # 把option放到select中， id=pro
        pro.append(option)
    }
    pro.onchange = function () {
        # 拿到当前的省
        var currentPro = this.value;
        var currentCityList = data[currentPro]; # ["廊坊", "邯郸"]

        city.innerText = ''; # 每次执行都清空一次

        for (var i = 0;i<currentCityList.length;i++){
            var option = document.createElement('option'); # <option ></option>
            option.value = currentCityList[i]; # 拿到数组的值
            option.innerText = currentCityList[i];  # 拿到数组的值，添加值

            # 把option放到select中，id=city
            city.append(option)
        }
    }
</script>
</body>
</html>