JS DOM(一)

1.DOM简介

DOM是HTML和XML文档的编程接口。DOM表示由多层节点构成的文档，通过他开发者可以添加，删除和修改各个页面的各个部分.

2.如何获取元素

**1.**根据ID获取

使用getElementById()方法可以获得带有ID的元素对象,语法格式如下：

document.getElementById(ID);

**2.**根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合，语法格式如下：

document.getElementsByTagName('标签名')；

注意事项

使用此方法返回的是获取过来元素对象的集合，以伪数组的形式存储，如若页面中没有这个元素，返回的是一个空的伪数组.

**3.**H5新增获取方式

根据类名返回元素对象集合，使用getElementsByClassName()获取，语法格式如下：

document.getElementsByClassName('类名')；

根据指定选择器返回第一个元素对象，使用qureySelector()获取，语法格式如下：

document.qureySlector('选择器');

根据指定选择器返回所有元素对象，使用qureySelectorAll()获取，语法格式如下：

document.qureySlectorAll('选择器');

**4.**特殊元素获取

获取body元素

document.body;

获取html元素

document.documentElement;

3.事件

1.事件的组成：事件源，事件类型，事件处理程序（通过一个函数赋值的方式完成），举例：

<button id="btn">胡依</button>
<script>
    var btn=document.getElemrntById('btn');//获取事件源
    btn.onclick=function(){//添加事件处理程序
        alert('是小仙女')
    }
</script>

胡依（事件源），点击（事件类型），弹出是小仙女（事件处理程序）

可以不用注册事件

4.操作元素

**1.**修改元素内容：element.innerText(去除HTML标签，同时空格和换行也会去掉)

​ element.innerHTML(包括HTML标签，同时保留空格和换行,一般情况下都用这个)

<button>显示系统时间</button>//事件源
    <div>时间</div>//事件源
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');//获取事件源
        btn.onclick = function () {
            div.innerHTML = getDate();//调用下面的时间函数
        }//注册事件并添加事件处理程序
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>

点击显示“显示系统时间”，“时间”即可变成当前的时间，此为操作元素.

**2.**修改元素属性(src,id,title等)

 <button id='zmzb'>椎名真白</button>
    <button id='stkt'>神田空太</button>
    <img src="zb.jpg" alt="">
    <script>
        //1.获取元素
        var zmzb = document.getElementById('zmzb');
        var stkt = document.getElementById('stkt');
        var img = document.querySelector('img');
        // 2.注册事件并添加事件处理程序，onclick(点击)即为注册事件
        zmzb.onclick = function () {
            img.src = 'zbb.jpg';
            img.title = '椎名真白';
        }
        stkt.onclick = function () {
            img.src = 'zb.jpg';
            img.title = '神田空太';

        }


    </script>

例：根据不同事件，页面显示不同图片，同时显示不同问题.

​ 如果12点前打开页面，显示早上的图片

​ 如果18点前打开页面，显示下午的图片

​ 如果24点前打开页面，显示晚上的图片

<div>早上好</div>
    <img src="zbb.jpg" alt="" title="早上好呀">
    <script>
        // 1.获取上方的div，img元素
        var div = document.querySelector('div');
        var img = document.querySelector('img');
        // 2.根据系统时间判断，需要日期内置对象
        var date = new Date();
        var h = date.getHours();
        //  3.利用if多分支语句判断条件，得到不同的图片，并改变图片和文字信息
        if (h < 12) {
            img.src = 'zbbb.jpg';
            div.innerHTML = '早上好呀亲';
        }
        else if (h < 18) {
            img.src = 'zbb.jpg';
            div.innerHTML = '下午好呀亲';
        }
        else {
            img.src = 'zb.jpg';
            div.innerHTML = '晚上好呀亲';
        }

    </script>

**3.**修改表单元素

利用DOM可以操作如下表单元素属性：

type(类型属性) value(值属性) checked selected disabled

例1：点击按钮，表单内文字信息变为“请输入您的身份证号码“

(改变表单的value属性)

回顾一下表单：

<input type="text" value="">//text表示文本框

接着:

 <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2.注册事件(onclick)
        btn.onclick = function () {
             input.value = "请输入您的身份证号码";// 3.处理程序
        }
    </script>

例2：仿京东案例，点击按钮将密码框切换为文本框，并可以查看明文.

( 点击按钮，改变表单的type属性，由原来的密码类型变为文本框)

首先写盒子，表单等html元素

<div class=box>
        <label for="">
            <img src="zb.jpg" alt="">
        </label>
        <input type="password" name="" id="">
</div>

然后写他的css样式，好久没写了，幸好有你啊pink老师-_-

 <style>
        .box {
             position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 375px;
            height: 30px;
            border: 0;
        }

        .box img {
            position: absolute;
            width: 24px;
            top: 2px;
            right: 2px;
        }
    </style>

最后用JavaScript语法来操作元素,最后得到

<style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 375px;
            height: 30px;
            border: 0;
        }

        .box img {
            position: absolute;
            width: 24px;
            top: 2px;
            right: 2px;
        }
    </style>
</head>

<body>
    <div class=box>
        <label for="">
            <img src="zb.jpg" alt="" id="eye">
        </label>
        <input type="password" name="" id="huyi">
    </div>
    <script>
        // 1.获取元素
        var eye = document.getElementById('eye');
        var huyi = document.getElementById('huyi');
        // 2.注册事件并处理程序
        var flag = 0;
        eye.onclick = function () {
            if (flag == 0) {
                huyi.type = 'text';
                eye.src = 'zb.jpg';
                flag = 1;
            } else {
                huyi.type = 'password';
                eye.src = 'zbb.jpg';
                flag = 0;
            }

        }
        //核心算法：利用一个flag变量来判断flag的值，flag初始值为0，
        //点击一次后切换为文本框，同时flag值变为1，再次点击则变为0

    </script>

**4.**修改样式属性

element.style 行内样式操作，适合样式少时使用

element.className 类名样式操作，适合样式多时使用

例1：点击图片，图片颜色改变，大小改变，里面的内容也改变 (由于样式少，我们使用style)

 <head>
     ~
     <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
  </style>
</head>

<body>
    <div>我是pink粉</div>
    <script>
        // 1.获取元素div
        var div = document.querySelector('div');
        // 2.注册事件并处理程序
        div.onclick = function () {
            this.style.backgroundColor = 'purple';
            this.style.width = '500px';
            this.innerHTML = '我是gay紫';
        }
    </script>

</body>

注意：1.JS里面的样式采用的是驼峰命名法，如在css中的backgroundcolor在JS中会变成backgroundColor

​ 2.JS中修改style样式操作，权重比较高，所有能够覆盖

例2：点击图片，图片颜色改变，大小改变，外边距改变，里面的内容也改变(由于改变样式多，因此我们使用className)

<head>
     ~
       <!-- 创建css样式 -->
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .class {
            width: 500px;
            height: 500px;
            background-color: purple;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="first">我是pink粉</div>
    <script>
        // 1.获取元素
        var div = document.querySelector('div');
        // 2.注册事件 处理程序
        div.onclick = function () {
            this.className = 'first class';
            this.innerHTML = '我是gay紫';
        }
    </script>

</body>

注意：1.class是个保留字，因此我们使用className来操作元素类名属性

​ 2.className会直接更改元素的类名，会覆盖原先的类名，如若想保留原先的类名，我们可以使用多类名选择器(例2中的方法)