这是我参与「第四届青训营」笔记创作活动的的第11天

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

DOM

文档对象模型（DOM）是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。通过DOM接口可以改变网页的内容、结构和样式。 DOM树

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看做是对象

获取元素

如何获取页面元素

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

根据ID获取

document.getElementById('ID名');

参数id是大小写敏感的字符串

<div id="time">2022-8-2</div>
    <script>
        //返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer); 
        console.dir(timer);
    </script>

根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。还可以获取某个元素（父元素）内部所有指定标签名的子元素，父元素必须是单个对象（必须指明是哪个元素对象），获取的对象不包括父元素自己。

document.getElementsByTagName('标签名');

<ul>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
    </ul>
    <script>
        //返回的是 获取过来元素对象的集合，以伪数组的形式存储的
        var lis=document.getElementsByTagName('li');
        console.log(lis);
        for (i=0;i<lis.length;i++){
            console.log(lis[i]);
        }
        
    </script>

如果页面中只有一个li，返回的还是伪数组的形式。如果页面中没有这个元素，返回的空的伪数组的形式。

通过HTML5新增的方法获取

根据类名返回元素对象集合

document.getElementsByClassName('类名');

根据指定选择器返回第一个元素对象，选择器需要加符号

document.querySelector('选择器');

返回指定选择器的所有对象集合

document.querySelectorAll();

获取特殊元素

获取body元素

//返回body元素对象
document.body

获取html元素

//返回html元素对象
document.documentElement

事件基础

事件三要素

事件源：事件被触发的对象
事件类型：如何触发
事件处理程序：通过一个函数赋值的方式完成

//事件源btn 事件类型onclick 事件处理程序function()
 <button id="btn">点我</button>
  <script>
    var btn=document.getElementById('btn');
    btn.onclick =function(){
        alert('今天你学习了吗');
    }
  </script>

执行时间的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
oonmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

改变元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。也不识别html标签。

<p>
    完善文章
    <span>123</span>
 </p>
<div></div>
  <script>
    var div=document.querySelector('div');
    div.innerText='<strong>今天是：</strong> 周二';
    var p=document.querySelector('p');
    console.log(p.innerText);
  </script>

element.innerHTML

从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。识别html标签。

<p>
    完善文章
    <span>123</span>
 </p>
<div></div>
  <script>
    var div=document.querySelector('div');
    div.innerHTML='<strong>今天是：</strong> 周二';
    var p=document.querySelector('p');
    console.log(p.innerHTML);
  </script>

点击按钮改变元素内容

<button>显示当前系统时间</button>
  <div>某个时间</div>
  <script>
    var btn=document.querySelector('button');
    var div=document.querySelector('div');
    btn.onclick =function(){
        div.innerText='2022-8-2';
    }
 
  </script>

改变元素属性

<button id="yy">杨洋</button>
  <button id="bjt">白敬亭</button><br>
  <img src="images/yy.jpg" title="杨洋">
  <script>
    // 获取元素
    var yy = document.getElementById('yy');
    var bjt = document.getElementById('bjt');
    var img = document.querySelector('img');
    //注册事件 处理程序
    yy.onclick = function(){
        img.src = 'images/yy.jpg';
        img.title ='杨洋';
    }
    bjt.onclick =function(){
        img.src = 'images/bjt.jpeg';
        img.title = '白敬亭';
    }
  </script>

当点击响应的按钮时，img的src和title属性就会发生相应的变化

改变表单属性

利用DOM可以操作如下表单元素的属性： type、value、checked、selected、disabled


<div class="box">
        <label for="">
            <img src="images/preview-close.png" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        var flag = 0;
        var img = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        img.onclick = function(){
            if (flag == 0){
                pwd.type = 'password';
                img.src = 'images/preview-close.png';
                flag = 1;
            }else{
                pwd.type = 'text';
                img.src = 'images/preview-open.png';
                flag = 0;
            }
            
        }
    </script>

通过改变input的属性，实现显示和隐藏密码功能

修改样式属性

//行内样式操作，权重较高
element.style
//类名样式操作
element.className

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
<div></div>
  <script>
    var div =document.querySelector('div');
    div.onclick = function() {
        this.style.backgroundColor = 'purple';
        this.style.width = '250px';
    }
  </script>

可以用this代替div实现样式的改变

element.style在样式较少或功能简单时使用，样式较多或功能复杂时使用element.className。给div添加类名使得div的样式改变。 className会直接更改元素的类名，会覆盖原先的类名。如果想保留原先的类名，需要element.className='原先的类名新类名'

<style>
               div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .change{
            width: 250px;
            height: 250px;
            background-color: purple;
            font-size: 100px;
            line-height: 250px;
            margin-top: 100px;
        }
    </style>
<div>文字</div>
  <script>
    var div =document.querySelector('div');
    div.onclick = function() {
        this.className = 'change';
    }
  </script>

自定义属性的操作

1、获取自定义属性值

element.属性获取内置属性值
element.getAttribute('属性')主要获得自定义的属性

2、设置元素属性值

element.属性='值'
element.getAttribute('属性','值')

3、移除属性 element.removeAttribute('属性')

H5自定义属性

1、设置H5自定义属性 H5规定自定义属性data开头作为属性名并且赋值比如

<div data-index="1"></div>

或者使用JS设置

element.setAttribute('data-index',2)

2、获取H5自定义属性

兼容性获取element.getAttribute('data-index')
H5新增element.dataset.index或element.dataset['index']

DOM与BOM（一）|青训营笔记

DOM