JS2-DOM

API和Web API

API

应用程序编程接口，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，且又无需访问源码，或理解内部工作机制的细节

API是给程序员提供的一种工具，以便能更轻松的实现想要的功能

Web API

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

DOM

DOM是(Document Object Model)文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口

可以通过DOM接口改变网页的结构、内容和样式

DOM树

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

DOM把以上内容都看作对象

获取元素

根据ID获取

getElementById

    <div id="time">2010</div>
    <script>
        // 参数id是大小写敏感的字符串,返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);//返回object
        //打印返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer);
    </script>

根据标签名获取

        //返回的是获取过来元素对象的集合 以伪数组的形式存储的 
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        //如果页面中只有一个li，返回的还是伪数组，没有则是空的伪数组[]

可以指定父元素内部所有指定标签名的子元素

父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

        var mm = document.getElementsByTagName('div');
        console.log(mm[0].getElementsByTagName('li'));

通过类名获取

document.getElementsByClassName('box');//选择类名为box的对象

//指定选择器的第一个对象
document.querySelector('.box');
document.querySelector('#nav');//选择器必须加符号
//指定选择器的所有对象
document.querySelectorAll('.box');

获取body3元素

document.body;

获取html元素

document.documentElement;//得到整个html标签的内容

事件基础

执行事件的步骤：

  1. 获取事件源
  2. 注册事件（绑定事件）
  3. 添加事件处理程序

常见的鼠标事件

  • onclick 鼠标左键按下
  • onmouseover 鼠标经过
  • onmouseout 鼠标离开
  • onfouse 获得鼠标焦点触发
  • onblur 失去鼠标焦点触发
  • onmousemove 鼠标移动触发
  • onmouseup 鼠标弹起触发
  • onmousedown鼠标按下触发

操作元素

改变元素内容

element.innerText=
element.innerHTML=
  • innerText不识别HTML标签，innerHTML识别,是W3C标准
  • 这两个属性是可读写的
  • 读的时候，innerText会去除标签空格和换行，innerHTML显示是完整的

修改常见元素属性

img.src换图

表单元素的属性操作

type、value、checked、selected、disabled

    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function () {
            input.value = '被点击了';
            // 禁用某个表单不能再点击用disabled
            btn.disabled = true;
            this.disabled=true;//this指向的是调用者
        }
    </script>

1615301396516

修改元素样式属性

  1. 使用element.style获得修改元素形式
this.style.backgroundColor='purple';
  • JS里的样式采取驼峰命名法
  • JS修改style样式操作，产生的是行内样式，css权重比较高
  • 一般样式少，功能简单时使用
  1. 使用this.className='',然后在css里定义该类的样式属性
this.className='change';
  • className是保留字，操作元素类名属性
  • 会直接更改类名，覆盖原来的类名
  • 如果想要保留原来的类名，可以使用多类名选择器
this.className='first change';

排他思想

给所有元素全部清除样式后，给当前元素设置样式，顺序不可以颠倒

        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                console.log('1');
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';

            }
        }

自定义属性操作

获取属性值

  1. element.属性 只能获取内置属性值（元素自带）
  2. element.getAttribute('属性') 可以获取自定义属性（程序员自己添加）
  3. H5新增

element.dataset.index或者element.dataset['index'] ie11才开始支持

dataset是一个集合，存放了所有以data开头的自定义属性

更改属性值

element.属性='值'

element.setAttribute=('属性'，'值');

移除属性值

element.removeAttribute('属性');

H5自定义属性

自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

自定义属性容易引起歧义，不容易判断是元素的内置属性还是自定义属性

一般规定data-开头作为属性名如：data-index

如果自定义属性里面有多个-连接的单词，获取的时候采取驼峰命名法

节点操作

概述

获取元素通常有两种方法

  1. 利用DOM提供的方法获取元素 逻辑性不强
  2. 利用节点层级关系获取元素 利用父子兄节点关系获取元素，逻辑性强但是兼容性较差

网页中所有内容都是节点，在DOM中，节点使用node表示，节点至少拥有nodeType节点类型、nodeName节点名称、nodeValue节点值三个基本属性

  • 元素节点nodetype为1
  • 属性节点2
  • 文本节点3（包括文字、空格、换行等）

实际开发中，节点操作主要操作的是元素节点

通过节点层级获取节点

利用DOM树把节点划分为不同的层级关系，最常见的是父子兄层级

父亲节点：

  • node.parentNode

返回的是最近的父节点，如果找不到就返回空

子节点：

  • parentNode.childNodes

得到的所有的子节点，包括文本节点（换行也会被计算进去）

如果想获取元素节点，需要专门处理（检测nodeType），一般不提倡使用

  • parentNode.children(非标准)，开发中常用

第一个子节点：

  • parentNode.firstChild 返回第一个子节点，会返回文本
  • parentNode.firstElementChild 返回第一个子元素节点
  • parentNode.lastElementChild 返回最后一个子元素节点

有兼容性问题，IE9以上支持

实际开发的写法 既 没有兼容性问题又返回第一个元素

node.children[0]
node.children[node.children.length-1]

兄弟节点：

  • node.nextSibling

得到的是下一个兄弟节点，包含元素节点和文本节点等等

  • node.previousSibling

返回上一个兄弟节点，找不到返回null

  • node.nextElementSibling 下一个元素节点
  • node.previousElementSibling 上一个元素节点

有兼容性问题，只能自己封装一个兼容性的函数

创建节点

  • document.createElement('tagment') 动态创建节点
  • node.appendChild(child) 添加一个节点到指定父节点的子节点列表末尾，类似数组中的push
  • node.insertBefore(child,指定元素) 将一个节点插入指定元素前面
  • 想要页面添加新元素 ；创建；添加

删除节点

parentNode.removeChild(子节点);

复制节点

node.cloneNode()

把node节点复制一份，如果括号参数为空或者false，默认是浅拷贝，只复制标签，不复制内容

三种方式动态创建元素区别

  • document.write()直接将内容写入页面的内容流，但是如果文档流已经执行完毕，则它会导致页面全部重绘
  • innerHTML如果采取拼接字符串的方式，需要大量拼接字符串，效率较低，如果采用数组格式拼接，效率高，结构稍微复杂
  • creatElement创建多个元素效率稍低一点点，但是结果更清晰

总结

创建

document.write

innerHTML

createElement

增

appendchild

insertBefore

删

removeChild

改

  1. 修改元素属性：src、href、title
  2. 修改普通元素内容：innerHTML、innerText
  3. 修改表单元素: value、type、disabled
  4. 修改元素样式：style、className

查

  1. DOM提供的API:getElementById、getElementByTagName
  2. H5提供的新方法 querySelector querySelectAll
  3. 利用节点操作：parentNode、children、previousElementSibling、nextElementSibling

属性操作

  1. setAttribute:
  2. getAttribute:
  3. removeAttribute:

事件操作

鼠标事件--

posted @ 2021-11-13 16:45  清梨  阅读(32)  评论(0)  编辑  收藏  举报