Web API 01

Web API介绍

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)

DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM又称为文档树模型


文档树模型.png

DOM经常进行的操作

  • 获取元素
  • 对元素进行操作(设置其属性或调用其方法)
  • 动态创建元素
  • 事件(什么时机做相应的操作)

获取页面元素

根据id获取元素

var div = document.getElementById('main');
console.log(div);
// 打印对象
console.dir(div);   //_proto_后面显示的是对象的属性
// 获取到的数据类型 HTMLDivElement，对象都是有类型的

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素

// 动态的获取的
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

getElementsByTagName即可以通过documnet来进行调用，同时还可以使用获取到的文档对象进行调用，但是getElementById只能使用的是document进行调用

根据类名获取元素（IE9以后才支持）

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

可以使用document或者是普通的元素都是可以进行调用的

根据name获取元素（不推荐）

根据给定的name属性来获取元素；不推荐使用，因为在不同的浏览器上工作的方式不同

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根据选择器获取元素

可以通过document或者是普通的元素都是可以获取的

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

事件

事件：触发-响应机制

事件三要素

  • 事件源:触发(被)事件的元素
  • 事件名称: click 点击事件
  • 事件处理程序:事件触发后要执行的代码(函数形式)
var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

DOM的属性操作

非标单元素的属性
href、title、id、src、className

// 获取到对象的属性，对应着标签的属性
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

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

   <style>
        #box {
            background-color: red;
            width: 200px;
            height: 200px;
        }

        .show {
            display: block;
        }

        .hidden {
            display: none;
        }
    </style>

</head>

<body>
    <input type="button" value="隐藏" id="btn">
    <br>
    <div id="box"></div>
    <script>
        // 1、获取元素
        var btn = document.getElementById("btn");
        var isShow = true;
        // 2、给按钮注册事件
        btn.onclick = function () {
            //3、控制div的显示和隐藏
            var box = document.getElementById('box');
            if (isShow) {
                //class是关键字
                box.className = 'hidden';
                // 事件处理中的this:事件源，谁调用this，这个this就指向谁
                this.value = '显示';
                isShow = false;
            } else {
                box.className = 'show';
                this.value = '隐藏';
                isShow = true;
            }
        }

    </script>
</body>

innerHTML和innerText
获取开始标签和结束标签之间的内容
innerHTML:如果获取的内容中有标签会把标签页获取到，包括空白和换行也是会获取到的
innerText：如果获取的内容中有标签，会把标签过滤掉，会把前后的换行和空表去掉

innerHTML:如果设置的内容，内容中带有标签吗，会以html的方式解析
innerText：如果设置的内容，内容中带有标签吗，在页面会把标签显示出来

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);

表单元素的属性

  • value 用于大部分表单元素的内容获取(option除外)
  • type 可以获取input标签的类型(输入框或复选框等)
  • disabled 禁用属性
  • checked 复选框选中属性
  • selected 下拉菜单选中

当html中标签的属性只有一个值的时候，DOM中的对应的元素的属性值为tru或者是false

检测用户输入的案例：

<body>
    <input type="text" id="txtUserName"><br>
    <input type="text" name="" id="txtUserPassword"><br>
    <input type="button" value="登  录" id="btnLogin">

    <!-- 检测用户名是否为3-6位，密码是否6-8位 -->
    <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';
            }else {
                txtUserName.className= '';
            }
        }
    </script>
</body>

全选反选案例

<!--
 * @Description: 
 * @Author: river
 * @LastEditors: huanghe
 * @Date: 2019-02-18 17:30:22
 * @LastEditTime: 2019-02-24 22:29:24
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            width: 300px;
            margin: 100px auto;
        }

        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: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>iphne8</td>
                    <td>6000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphne8</td>
                    <td>6000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphne8</td>
                    <td>6000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphne8</td>
                    <td>6000</td>
                </tr>
            </tbody>
        </table>
        <input type="button" id="btn" value="反  选">
    </div>

    <script src="15jscode.js"> </script>
</body>

</html>

js的代码如下所示

/*
 * @Description: 
 * @Author: river
 * @LastEditors: huanghe
 * @Date: 2019-02-18 18:13:57
 * @LastEditTime: 2019-02-24 22:28:47
 */

// 1：全选
// 1.1获取到父亲的checkbox,注册点击事件
var j_cbAll = document.getElementById('j_cbAll');
//获取所有的字的checkbox
var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
//1.2给父亲的check绑定事件
j_cbAll.onclick = function () {
    //给所有的checkbox绑定check属性值
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        //判断类型
        console.log(input.type);
        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 () {
        console.log('选中。。。。');
        checkAllCheckBox();
    }
    
}

//2:反选
var btn = document.getElementById('btn');
// 让所有选择的取消选择，让所有没有选择的拥有选中的状态
btn.onclick = function () {
    for(var i=0;i<inputs.length;i++){
        var input = inputs[i];
        if(input.type === 'checkbox'){
            //让选择的状态相反
            input.checked = !input.checked;
            //并且监测每一个选择框的状态，如果只有有一个没有选中就取消父盒子的选中的状态
            checkAllCheckBox();
        }
    }
}


/**
 * @description: 监测所有选择器的选中的状态
 * @param : undefined
 * @return: 
 */
function checkAllCheckBox() {
    var allChecked = true;
    for (var j = 0;j<inputs.length ;j++){
        var input = inputs[j];
        if (input.type !== 'checkbox'){
            continue;
        }
        //只要一个没有被选中就是fasle
        if(!input.checked) {
            allChecked = false;
        }
    }
    //设置父盒子的选中状态
    j_cbAll.checked = allChecked;

}

自定义属性操作

<div age='18'  id=“box” personId ='1'>张三</div>
<script>
       var box = document.getElementById('box');
        //自由的属性
        console.log(box.id);
        //获取自定义属性
      console.log(box.getAttribute('age'));
      console.log(box.getAttribute('personId'));
      //设置自定义属性
      box.setAttribute(' sex','male');
      box.setAttribute(' class','texst');

    //移除自定义属性
    box.removeAttribute(' class');
</script>

DOM节点

节点分为：属性节点、元素节点、文本节点、注释节点

节点图.png
<!--
 * @Description: 
 * @Author: river
 * @LastEditors: huanghe
 * @Date: 2019-03-25 19:58:31
 * @LastEditTime: 2019-03-25 20:28:17
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <span>span</span>
        <p>p标签</p>
        <ul>
            <li><a href="javascript:void(0)">让链接不输出任何的内容，返回undefine</a></li>
        </ul>
    </div>
    
    <script>
        var box =document.getElementById("box");
        //获取父节点
        console.log(box.parentNode);
        console.log(box.childNodes);
        //属性节点、文本、元素、注释
        for(var i=0;i<box.childNodes.length;i++){
            //找box中所欲的元素
            var node = box.childNodes[i];
            //判断当时是否是元素节点
            if(node.nodeType === 1){
                console.log(node);
            }
        }

        //直接获取子元素的方式   这里的children是会动态的变化的
        console.log(box.children);

        //获取第一个节点
        console.log(box.firstChild);

        //获取第一个元素节点
        console.log(box.firstElementChild);
        
    </script>
    

</body>
</html>

动态创建元素

三种方式:

  • document.write()
  • element.innerHTML
  • document.createElement() <推荐的方式>
<!--
 * @Description: 
 * @Author: river
 * @LastEditors: huanghe
 * @Date: 2019-03-26 20:03:29
 * @LastEditTime: 2019-03-26 20:43:06
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <input type="button" value="第一种方式" id="btn">

    <input type="button" value="第二种方式" id="btn2">

    <input type="button" value="第二种方式(生成列表)" id="btn3">

    <input type="button" value="第三种方式" id="btn4">

    <div id="box">

    </div>
    <script>
        // 动态创建元素
        // document.write()
        // element.innerHTML
        // document.createElement()

        //第一种方式:会把页面中的所有的页面全部覆盖
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            document.write('Hello <p>world</p>');
        }

        //第二种方式:会把页面中的所有的页面全部覆盖
        var btn2 = document.getElementById('btn2');
        btn2.onclick = function () {
            var box = document.getElementById('box');
            box.innerHTML = 'Hello <p>world</p>';
        }

        //第二种方式 生成列表  每次设置HTML都会重新的绘制html，使得效率低下
        var datas = ['apple', 'banner', 'orange', 'juice'];
        var btn3 = document.getElementById('btn3');
        btn3.onclick = function () {
            var box = document.getElementById('box');
            box.innerHTML = '<ul>';
            //遍历数据
            for (var i = 0; i < datas.length; i++) {
                var data = datas[i];
                box.innerHTML += '<li>' + data + '</li>';
            }
            box.innerHTML += '</ul>';
        }


        //第三种方式（推荐）
        var btn4 = document.getElementById('btn4');
        btn4.onclick = function () {
            //创建DOM对象，在内存中创建的对象
            var p = document.createElement('p');
            //设置对象的属性
            p.innerText='Hello';  //纯文本
            p.style.color = 'red';

            // 父元素添加子元素
            var box = document.getElementById('box');
            box.appendChild(p);
        }




    </script>

</body>

</html>

创建表格：要实现的功能如下所示


snipaste20190326_215553.png
<!--
 * @Description: 
 * @Author: river
 * @LastEditors: huanghe
 * @Date: 2019-03-26 21:03:53
 * @LastEditTime: 2019-03-26 21:54:51
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box table {
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        // 模拟数据
        var datas = [
            { name: 'zs', subject: '语文', score: '90' },
            { name: 'ls', subject: '数学', score: '89' },
            { name: 'wu', subject: '英语', score: '92' },
            { name: 'xs', subject: '历史', score: '95' },
            { name: 'hh', subject: '地理', score: '91' }
        ]

        //表头数据
        var headDatas = ['姓名', '科目', '成绩', '操作']


        // 创建table元素
        var table = document.createElement('table');
        // 设置table的属性
        table.border = '1px';
        table.width = '400px';
        var box = document.getElementById('box');
        box.appendChild(table);

        // 创建表头
        var thead = document.createElement('thead');
        table.appendChild(thead);

        var tr = document.createElement('tr');
        thead.appendChild(tr);
        tr.style.height = '40px';
        tr.style.backgroundColor = 'gray';

        for (var i = 0; i < headDatas.length; i++) {
            var th = document.createElement('th');
            tr.appendChild(th);
            th.innerText = headDatas[i];
        }

        // 创建数据行
        var tbody = document.createElement('tbody');
        table.appendChild(tbody);
        tbody.style.textAlign = 'center';
        
        for (var i = 0; i < datas.length; i++) {
            var data = datas[i];
            tr = document.createElement('tr');
            tbody.appendChild(tr);

            // 变量对象
            for (var key in data) {
                var td = document.createElement('td');
                tr.append(td);
                td.innerText = data[key];
            }

            //删除列
            td = document.createElement('td');
            tr.appendChild(td);
            var link = document.createElement('a');
            td.appendChild(link);
            link.innerText = '删除';
            link.href = 'javascript:void(0)'

            //删除操作
            link.onclick = linkDelete
        }

        //删除元素
        function linkDelete(){
            //1、获取父元素,删除子元素，当前按钮所在的行 a ->td ->tr
            tbody.removeChild(this.parentNode.parentNode);
            return false;
        }


    </script>
</body>

</html>

常用的元素的操作方法

  • createElement()：创建元素
  • appendChild()：添加子元素
  • removeChild()：删除子元素（先找父元素）
  • inserBefore() ：插入元素，可以指定位置
  • replaceChild()：替换元素，可以指定位置
  • cloneNode():复制一个节点
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,723评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,003评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,512评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,825评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,874评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,841评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,812评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,582评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,033评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,158评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,789评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2赞 352

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,472评论 1赞 45
  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,490评论 1赞 11
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,118评论 0赞 21
  • 九、DOM
      DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。   DOM 描绘...
    霜天晓阅读 3,636评论 0赞 7
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,179评论 0赞 3