JS DOM笔记

js的组成

    ECMAScript:JS的语法

    DOM:页面文档对象模型

    BOM:浏览器对象模型

    web APIs

    是浏览器提供的一套操作浏览器功能和页面元素的API

    主要学习的是DOM和BOM

    web APIs是JS独有的

    主要学习页面交互功能

    API:应用程序编程接口

    // 获取元素
    var p1 = document.getElementById("text")
    console.log(p1);
    console.dir(text);

    // 遍历出每个内容
    var p2 = document.getElementsByTagName("li")
    for (var i = 0; i < p2.length; i++) {
        console.log(p2[i]);

    }
    console.log(p2);

    // 获取某个特定的元素
    var nav = document.getElementById("nav")
    var navlis = nav.getElementsByTagName("li")
    console.log(navlis);

    var box = document.getElementsByClassName("box")
    console.log(box);

    // queryselect 返回的是指定选择器的第一个元素  切记 里面的选择器需要加符号
    var firstbox = document.querySelector(".box")
    console.log(firstbox);
    var nav2 = document.querySelector("#box2")
    console.log(nav2);
    var li2 = document.querySelector("li")
    console.log(li2);

    // 获取到姓名后存储到变量中去
    var unsme = prompt("请输入您的姓名")
    alert("您的姓名是" + unsme)

    // 获取body元素
    var bodylie = document.body
    console.log(bodylie);

    // 获取HTML元素
    var HTMLles = document.documentElement;
    console.log(HTMLles);

DOM:文档对象模型:处理可扩展标记语言的标准编程接口

    文档:一个页面就是一个文档,DOM中使用document表示

    元素:页面里面所有标签都是元素,DOM中使用element表示

    节点:网页中所有的内容都是节点,DOM中使用node表示

    语法

    var element = document.getElementById(id);

    返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

    console.dir()可以打印我们返回的元素对象 更好的查看里面的属性和方法

    <p id="text">sss</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul id="nav">
        <li>12</li>
        <li>23</li>
        <li>34</li>
        <li>45</li>
        <li>56</li>
    </ul>
    <div class="box">45678</div>
    <div id="box2">22222</div>
 var btn1 = document.getElementById("btn")
    btn1.onclick = function () {
        console.log("ok");
    }

    // 获取事件源
    var div = document.querySelector("div")
    // 绑定事件 注册事件
    // div.onclick
    // 添加事件处理程序
    div.onclick = function () {
        console.log("hhhhh");

    }

 

事件基础

    事件可以被JS检测到的行为

    事件的三部分

    事件源 事件类型 事件处理程序 事件三要素

    事件源:事件被触发的对象

    事件类型:如何触发 什么事件

    事件处理程序 通过函数赋值的方式

    <button id="btn">唐伯虎</button>

操作元素

    改变元素内容

    element.innerHTML W3C标准

    识别HTML标签，保留空格和换行

    element.innerText 非标准

    不识别HTML标签，去除空格和换行

    这两个属性是可以读写的 可以获取元素里面内容

 

    <button id="button">显示时间</button>
    <div id="div">某个时间</div>
    <p id="p2">123</p>
    <script>
        // 点击按钮时 div里面的值发生变化
        var btn = document.getElementById("button")
        var div2 = document.getElementById("div")
        btn.onclick = function () {
            div2.innerHTML = getDate()
        }

        function getDate() {
            var date = new Date()
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var day = date.getDay()
            var dateArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            return ("今天是" + year + "年" + month + "月" + dates + "日" + dateArr[day])
        }

        // 元素可以不用添加事件
        var p3 = document.getElementById("p2")
        p3.innerHTML = getDate()
    </script>

 <!-- 切换图片案例 -->
    <button id="button1">1</button>
    <button id="button2">2</button>
    <img src="../imges/business-pic3.jpg" alt="">
    <script>
        // 获取元素
        var button1 = document.getElementById("button1")
        var button2 = document.getElementById("button2")
        var img = document.querySelector("img")
        // 注册事件  修改图片地址
        button1.onclick = function () {
            img.src = "../imges/business-pic4.jpg"
        }
        button2.onclick = function () {
            img.src = "../imges/business-pic3.jpg"
        }
    </script>

案例

<!-- 分时显示不同的图片 -->
    <img src="../imges/u=1362909999,1391932580&fm=11&gp=0.jpg" alt="">
    <div>上午好</div>
    <script>
        var img = document.querySelector("img")
        var div = document.querySelector("div")
        var time = new Date();
        var h = time.getHours();
        if (h < 12) {
            img.src = '../imges/u=1362909999,1391932580&fm=11&gp=0.jpg'
            div.innerHTML = "上午好好学习"
        } else if (h < 18) {
            img.src = '../imges/u=3070420121,2549906773&fm=26&gp=0.jpg'
            div.innerHTML = "中午好好学习"
        } else {
            img.src = '../imges/u=3279797416,3064979525&fm=26&gp=0.jpg'
            div.innerHTML = "晚上好好学习"
        }
    </script>

 <!-- 点击按钮修改文本内容 -->
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector("button")
        var input = document.querySelector("input")
        btn.onclick = function () {
            input.value = '是是是'
            // 如果想要某个表单被禁用可以用disabled
            this.disabled = true
            // this指向的是事件函数的调用者
        }
    </script>

 <!-- 点击眼睛查看密码 -->
    <div class="box">
        <label for=""><img src="../imges/business-pic4.jpg" alt="" id="eye"></label> <input type="password" name=""
            id="pwd">
    </div>
    <script>
        var eye = document.getElementById("eye")
        var pwd = document.getElementById("pwd")
        var flag = 0;
        // 点击一次过后flag一定要变化'
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = "text"
                flag = 1;
            } else {
                pwd.type = "password"
                flag = 0;
            }
        }
    </script>

 <!-- 点击box修改背景 -->
    <div id="box2">eeeeeeeeee</div>
    <script>
        var box2 = document.getElementById("box2")
        var flag = 0
        box2.onclick = function () {
            if (flag == 0) {
                this.style.background = 'blue'
                this.style.width = "350px"
                flag = 1
            } else {
                this.style.background = 'black'
                this.style.width = "450px"
                flag = 0
            }

        }
    </script>

css代码

        img {
            width: 300px;
            height: 300px;
        }

        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #efefef;
            margin: 100px auto;
            position: relative;
        }

        .box input {
            width: 350px;
            height: 30px;
            outline: none;
        }

        .box img {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 7px;
            right: 70px;
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: gold;
        }

        .box3 {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            display: block;
            position: relative;
        }

        .box3 i {
            position: absolute;
            left: -10px;
            top:;
            cursor: pointer;
        }