js入门之DOM

一、理解Web API

Web API
Application Programming Interface 应用程序编程接口， 是一个预先定义好的函数和方法
目的是提供应用程序与开发人员基于某软件或硬件。
任何开发语言都有自己的API
API的特征输入和输出（I/O）
API的使用方法(console.log())

Web API 的概念
浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
此处的Web API特指浏览器提供的API（一组方法）
掌握常见浏览器提供的API的调用方式

学习目标
1. 掌握API和Web API的概念
2. 掌握常见浏览器提供的API调用方式
3. 能通过Web API开发常见额页面交互功能
4. 能都利用搜索引擎解决问题

二、理解DOM的概念

Document Object Model 文档对象模型， 把文档抽象成对象的形式，对象给我们提供了属性和方法
用来处理可标记语言，DOM是一种基于树形的结构

文档： 一个网页可以称为文档
节点： 网页中所有内容都是节点（标签、 属性、 文本、 注释等）
元素： 网页中的标签
属性： 标签中的属性

DOM经常进行的操作
获取元素
对元素进行操作（设置其属性或调用其方法）
动态创建元素
事件（什么时候做相应的操作）

三、DOM操作

1. 获取页面元素

　　1.1 根据id获取页面元素

<script>
var p = document.getElementById('p');
</script>

　　1.2 获取标签返回一个伪数组

document.getElementsByTagName('div');
注意点： 获取到的集合是动态集合

　　1.3 查找某个标签下的子标签

var container = document.getElementById('container');
var divs = container.getElementsByTagName('div');   在这里不能是ID

　　1.4 根据标签的属性获取元素

document.getElementsByName('main'); 不推荐使用

　　1.5 根据标签的class属性获取元素

document.getElementsByClassName('main')  有浏览器兼容问题

　　1.6 根据选择器查找元素（有浏览器兼容问题）

var main = document.querySelector('.main'); 只返回一个元素
var main = document.querySelectorAll('.main'); 返回多个

三. 事件

事件： 触发响应
1. 获取按钮
2. 给按钮注册事件
    事件名称 click
    事件源： 谁触发的事件
    事件处理函数
几乎所有的标签都可以添加事件
var btn = document.getElementById('btn')
btn.onclick = function () {
    alert('别点我')
}

案例1：点击按钮来回切换图片

<input type="button" id='btn' value="点我">
    <br>
    <img src="image/denglun.jpg" id="mv" alt="">
    <script>

        var btn = document.getElementById('btn');
        var mv = document.getElementById('mv');
        var flag = 1;
        btn.onclick = function() {
            if (flag === 1) {
                mv.src = 'image/dahua.jpg';
                flag = 2;
            } else if (flag === 2) {
                mv.src = 'image/denglun.jpg';
                flag = 1;

            }
        }
    </script>

View Code

案例2：获取dom对象的属性值和修改属性

<a id="link" href="http://www.baidu.com" title="我是百度">百度</a>
    <img id="mv" src="image/dahua.jpg" alt="美女">
    <script>
        console.log(link.id);
        link.href = 'http://google.com'
    </script>

View Code

案例3：点击按钮div显示隐藏

<input id='btn' type="button" value="隐藏">
    <br>
    <div id="box"></div>
    <script>
        var btn = document.getElementById('btn');

        var isShow = true;
        btn.onclick = function () {
            
            var box = document.getElementById('box');
            if (isShow) {
                box.className = 'hidden';
                this.value = '显示';
                isShow = false;

            } else {
                box.className = 'show';
                this.value = '隐藏';
                isShow = true;
            }
        }
    </script>
属性一般对应标签里的属性
事件处理函数中的this 事件源，谁调用的该事件 this就指向谁

View Code

案例4：取消a标签的默认行为

<a id='link' href="http://www.baidu.com">百度</a>
    <script>
        var link = document.getElementById('link');
        link.onclick = function () {
            alert('点击我了');
            return false;
        }
    </script>

View Code

四、innerHTML 和innerText

获取开始标签和结束标签之间的内容
innerHTML 获取内容的时候如果内容中有标签，或把标签获取到
innerText 如果内容中有标签，会把标签过滤掉，还会把前后的换行和空白都去掉


HTML的转义符 
&lt;内容&gt; 尖括号
&quot; 双引号
&apos; 单引号
&amp;  and符号
&nbsp;
&copy;

设置内容的时候使用innerText(textContent) 效率高
设置含标签的时候使用innerHTML

解决ininnerText兼容问题

<div id="box">hello</div>
    <script>
        var box = document.getElementById('box');
        console.log(getInnerText(box));

        function getInnerText(element) {
            if (typeof element.innerText === 'string') {
                return element.innerText;
            } else {
                return element.textContent;
            }
        }
    </script>

五、表单元素设置

value 用于大部分表单的内容获取（option除外）
type 可以读取input标签的类型 （）
disabled
checked
selected

表单元素跟非表单元素使用差不多
不同的地方只有disabled checked selected 这几个的属性只有true和false

案例1：给文本框赋值

<input type="text">  <br>
    <input type="text">  <br>
    <input type="text">  <br>
    <input type="text">  <br>
    <input id="btn" type="button" value="获取文本框的值">
    <script>
        var inputs = document.getElementsByTagName('input');
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            if (input.type === 'text') {
                input.value = i;
            }
        }
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var array = []
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input.type === 'text') {
                    array.push(input.value);
                }
            }
            console.log(array.join('|'))            
        }

View Code

案例2：检测用户名和密码

<input type="text" id='txtUserName'> <br>
<input type="password" id='txtUserPassword'> <br>
<input type="button" id="btnLogin" value=" 登 录 "> 
<script>
    var btnLogin = document.getElementById('btnLogin');
    btnLogin.onclick = function () {
        var txtUserName = document.getElementById('txtUserName');
        var txtUserPassword = document.getElementById('txtUserPassword')
        if (txtUserName.value.length < 3 || txtUserName.value.length > 6) {
            txtUserName.className = 'bg';
            return;
        } else {
            txtUserName.className = '';
        } 
        if (txtUserPassword.value.length < 6 || txtUserPassword.value.length > 8) {
            txtUserPassword.className = 'bg';
            return;
        } else {
            txtUserPassword.className = '';
        }
        console.log('执行登录');
    }

</script>

View Code

案例3：设置下拉框中的选中项

<input type="button" value="设置" id='btnSet'>
    <select name="" id="selCities">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">杭州</option>
        <option value="4">郑州</option>
        <option value="5">武汉</option>
    </select>
    <script>
        var btnSet = document.getElementById('btnSet');
        btnSet.onclick = function () {
            var selCities = document.getElementById('selCities');
            var options = selCities.getElementsByTagName('option');
            var randomIndex = parseInt(Math.random() * options.length);
            var option  = options[randomIndex];
            option.selected = true;
        }

View Code

案例4：获取焦点的事件是focus 和失去焦点 blur

<style>
    .gray {
        color: gray;
    }
    .black {
        color: black;
    }
</style>
</head>
<body>
    <input type="text" class="gray" value="请输入搜索关键字" id="txtSearch">
    <input type="button" value="搜索" id="btnSearch">
    <script>
        var txtSearch = document.getElementById('txtSearch');
        txtSearch.onfocus = function () {
            if (this.value === '请输入搜索关键字') {
                this.value = '';
                this.className = 'black';

            }
        }
        txtSearch.onblur = function () {
            if (this.value.length === 0 || this.value === '请输入搜索关键字') {
                this.value = '请输入搜索关键字';
                this.className = 'gray';
            }
        }
    </script>

View Code

案例5：全选和反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" id="j_cbAll">
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id='j_tb'>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPhone8</td>
                    <td>6000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iWatch</td>
                    <td>6000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPad</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>Mac Pro</td>
                    <td>16000</td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="反 选" id="btn">
        <script>
            var j_cbAll = document.getElementById('j_cbAll');
            var j_tb = document.getElementById('j_tb');
            var inputs = j_tb.getElementsByTagName('input');
            j_cbAll.onclick = function () {
                for (var i = 0; i < inputs.length; i++) {
                    var input = inputs[i];
                    if (input.type === 'checkbox') {
                        input.checked = this.checked;
                    }
                }
            }

            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input.type !== 'checkbox') {
                    continue;
                }
                input.onclick = function () {
                    checkAllCheckBox()
                    
                }
            }

            function checkAllCheckBox () {
                var isAllChecked = true;
                    for (var i = 0; i < inputs.length; i++) {
                        var input = inputs[i];
                        if (input.type !== 'checkbox') {
                            continue;
                        }
                        
                        if (!input.checked) {
                            isAllChecked = false;
                        }
                    }
                    j_cbAll.checked = isAllChecked;
            }
            var btn = document.getElementById('btn') 
            btn.onclick = function () {
                for (var i = 0; i < inputs.length; i++) {
                    var input = inputs[i];
                    if (input.type !== 'checkbox') {
                        continue;
                    }
                    input.checked = !input.checked;
                    checkAllCheckBox();

                }
            }
                
        </script>
        
    </div>
</body>
</html>

View Code

六、自定义属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box" age="18" personId="1">张三</div>
    <script>
        var box = document.getElementById('box');
        console.log(box.id);
        console.log(box.getAttribute('age'));
        box.setAttribute('geder','male');
        box.removeAttribute('personId');
    </script>
</body>
</html>

猜你喜欢