01JavaScript-dom操作

MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API

DOM:

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。

DOM树

image.png

DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

• 文档：一个页面就是一个文档，DOM中使用document表示
• 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
• 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

获取元素:

• 根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null

---

    
2019-9-9
    

根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

---

    

        
知否知否，应是等你好久11
        
知否知否，应是等你好久22
        
知否知否，应是等你好久33
        
知否知否，应是等你好久44
        
知否知否，应是等你好久55
    
    

        
生僻字
        
生僻字
        
生僻字
        
生僻字
        
生僻字
    
    

##注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

H5新增获取元素方式

    
盒子1
    
盒子2
    

        

            
首页
            
产品
        
    
    

获取特殊元素:

  // 1.获取body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html 元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);

事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发--- 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

• 事件源（谁）：触发事件的元素
• 事件类型（什么事件）： 例如 click 点击事件
• 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

    唐伯虎
    

常见的鼠标事件

image.png

操作元素

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

• 获取系统时间：

 // 当我们点击了按钮，  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }

        function getDate() {
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            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];
        }
        // 我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();

innerText 和 innerHTML的区别

• 获取内容时的区别：
  innerText会去除空格和换行，而innerHTML会保留空格和换行
• 设置内容时的区别：
  innerText不会识别html，而innerHTML会识别
  demo:

        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '今天是： 2019';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '今天是： 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);

image.png

常用元素的属性操作

image.png

获取属性的值

元素对象.属性名

---

设置属性的值

元素对象.属性名 = 值

---

    刘德华
    张学友 

    

    

表单元素的属性操作

image.png

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

    按钮
    
    

显示/隐藏密码案例：

image.png

image.png

样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

• 方式一：通过操作style属性

案例：

image.png

显示隐藏文本框内容:

image.png

 // 1.获取元素
        var text = document.querySelector('input');
        // 2.注册事件 获得焦点事件 onfocus 
        text.onfocus = function() {
                // console.log('得到了焦点');
                if (this.value === '手机') {
                    this.value = '';
                }
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333';
            }
            // 3. 注册事件 失去焦点事件 onblur
        text.onblur = function() {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';

方式2：通过操作className属性

元素对象.className = 值;因为class是关键字，所有使用className。

image.png

// 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';

案例：

 




    
文本
    

仿新浪注册页面:

首先判断的事件是表单失去焦点 onblur
如果输入正确则提示正确的信息颜色为绿色小图标变化
如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
因为里面变化样式较多，我们采取className修改样式

 



    

        
        
请输入6~16位密码