DOM学习笔记（坚持~~~~）

YuKing_HONG

已于 2023-02-23 14:59:14 修改

阅读量704

点赞数 1

分类专栏： DOM 文章标签：学习 javascript 前端

于 2022-12-20 18:39:38 首次发布

本文链接：https://blog.csdn.net/YuKing_HONG/article/details/128386075

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.DOM简介

1.1什么是DOM

文档对象模型简称DOM，W3C组织推荐的处理可扩展标记语言的标准编程接口，通过这些DOM接口可以改变网页的内容，结构和样式。

1.2 DOM树

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中所有标签都是元素，DOM中使用element表示

节点：网页中所有内容都是节点（标签属性文本注释等），DOM中使用node表示。

Dom把以上内容都看作是对象

2.获取元素

2.1如何获取网页元素

Dom在我们实际开发中主要只用来操作元素

我们如何获取页面中的元素呢？

获取元素可以使用以下几种方法：

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

2.2根据ID获取

使用getElementById(‘id’)方法获取ID的元素对象。

返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

getElementById()返回一个匹配特定 ID的元素。

//语法 var element = document.getElementById(id);

//1.因为文档页面是从上往下加载的，所以先有标签，所以JS写在标签下面

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

//3.返回但是元素对象

//4.驼峰命名法

2.3根据标签名获取

getElementsByTagName()

var timel = document.getElementsByTagName('li');

//1.返回是获取过来的元素对象的集合以伪数组形式存储

console.log(timel);

console.log(timel[0]);

//2.我们想要依次打印里面的元素对象可以采取遍历的形式

for (i = 0; i < timel.length; i++) {

console.log(timel[i])

}

//3.得到的元素对象是动态的。

//4.如果页面中没有这个元素，返回的是一个空的伪数组。

//5.还可以获取某个父元素内部所有指定标签名的子元素

element.getElementsByTagName('标签名')

var olli = ol.getElementsByTagName('li');//指定ol里面的li元素

console.log(olli);

还可以这样先用ID获取到父元素，然后用标签获取子元素。

var ollist = document.getElementById('yes');

console.log(ollist.getElementsByTagName('li')); //HTMLCollection(4) [li, li, li, li]

2.4H5新增的获取方法

1..根据类名获取某些元素

.getElementsByClassName('类名')

例如：

var box = document.getElementsByClassName('bu');

console.log(box);

2.querySelector（‘ ’）返回指定选择器的第一个元素对象

例如

var box1 = document.querySelector('.bu');

console.log(box1);

var box2 = document.querySelector('#time');

3.querySelectorAll(' ');返回指定选择器的所有元素对象合集

var boxall = document.querySelectorAll('.bu');

console.log(boxall);

var allli = document.querySelectorAll('li');

console.log(allli);

2.5获取特殊元素body html

1.获取body元素

var bodyEle = document.body;

console.log(bodyEle);

2.获取html元素

var htmlEle = document.documentElement;

console.log(htmlEle);

3 事件基础

3.1什么是事件基础

javascript使我们有能力创建动态页面，而时间是可以被Javascript侦测到的行为

简单理解：触发---响应机制

网页中每一个元素都可以产生某些可以触发Javascript的事件。例如用户可以点击某个按钮产生一个事件然后去执行某些操作

3.2事件三部分

事件源，事件类型，事件处理程序，也称作事件三要素

(1)事件源事件被触发的对象

var btn = document.getElementById('btn');//事件源

(2)事件类型如何触发什么事件比如鼠标点击（onclick），还是鼠标经过，还是键盘按下

(3)事件处理过程通过一个函数赋值的方式完成

btn.onclick = function () { //处理过程

alert('点秋香');

}

3.3执行事件步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值形式）

var div = document.querySelector('div');

div.onclick = function () { //onclick就是绑定事件

console.log('我被选中了')

}

常见鼠标事件

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

3.4分析事件三要素

下拉菜单案例分析，鼠标经过文字展示下拉菜单。那么文字就是事件源，鼠标经过就是注册事件，展示下来菜单就是事件处理程序。

注意多看多分析。

4.操作元素

DOM操作可以改变网页内容，结构和样式。我们可以利用DOM操作元素来改变元素里面的内容，属性等。注意一下都是属性。

4.1改变元素内容

1.element. innerText

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

element. innerText 是在原来的内容上前面添加内容。

案例：点击按钮，页面显示当前系统的时间

   <body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>
        FDFD
        <span>123</span>
    </p>

 <script>
 //获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //注册事件
        btn.onclick = function () {
            div.innerText = getDate();
        }
        function getDate() {

            //获得当前的日期，同时展示XXXX年X月x日  星期X。
            var date = new Date();
            var years = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
            var day = date.getDay();

            return years + '年' + month + '月' + dates + '日 ' + week[day] + date.getHours() + '时' + date.getMinutes() + '分' + date.getSeconds() + '秒';


        }
        //我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerText = getDate();//页面加载就显示了
        console.log(p.innerText);//FDFD 123
        console.log(p.innerHTML);//FDFD   <span>123</span>

    </script>

  </body>

2.element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。识别html标签，W3C标准。这个属性使用比较多。

element.innerHTML 是替换掉原来的内容。

//innerHTML 和innerText 这两个属性是可以读写的，可以获取元素里面的内容。

4.2常见元素的属性操作

修改的时候就是元素.属性=值，元素重新给他一个值就修改完成了。

比如：修改元素属性 src

点击刘德华按钮显示刘德华图片点击张学友显示张学友图片

代码如下;

<body>
    <button id="ldh"> 刘德华</button>
    <button id="zxy">张学友</button> <br>
    <img src="image/liu.jpg" alt="#" title="刘德华">

    <script>
        //4.2常见元素的属性操作
        //修改的时候就是元素.属性=值，元素重新给他一个值就修改完成了。
        //修改元素属性 src
        //1.获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        //2.注册事件  处理程序
        ldh.onclick = function () {
            img.src = 'image/liu.jpg';
            img.title = '刘德华';
        }
        zxy.onclick = function () {
            img.src = 'image/zhang.png';
            img.title = '张学友';
        }
    </script>
</body>

案例：分时显示不同图片和问候语

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            height: 160px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <img src="./image/上午.jpg" alt="#">
    <div>上午好</div>
    <script>
        //根据系统不同时间判断，需要用到日期内置对象
        //利用分支语句设置不同图片
        //修改img元素的src属性
        //需要一个div显示问候语，跟随时间修改元素内容
        var div = document.querySelector('div');
        var img = document.querySelector('img');
        var date = new Date();
        var h = date.getHours();
        if (h < 10) {
            img.src = './image/上午.jpg';
            div.innerHTML = '上午好~';
        } else if (h < 13) {
            img.src = './image/中午好.png';
            div.innerHTML = '中午好~';
        } else if (h < 18) {
            img.src = './image/下午好.png';
            div.innerHTML = '下午好~';
        } else if (h < 24) {
            img.src = './image/晚上好.gif';
            div.innerHTML = '晚上好~';
        }

       // alert(h);//检查是否获取到时间
    </script>
</body>

</html>

4.3表单元素的属性操作

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

<body>
    <button>按钮</button>
    <input type="text" value='请输入内容' name="" id="">
    <script>
        /* 利用DOM可以操作如下表单元素的属性；
        type,value,checked,selected,disabled */

        //1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2.注册事件，处理程序
        btn.onclick = function () {
            //innerHTML这个用在普通的盒子比如div标签里面的内容
            //表单里面的值 文字内容是通过value来修改的。 
            input.value = '改变了';
            //如果想某个表单禁用，不能被点击  disabled的值设置为true
            // btn.disabled = true;
            this.disabled = true;
            //this指向的是事件函数的调用者

        }
    </script>
</body>

分时显示不同图片和问候语

分时显示不同图片和问候语http://t.csdn.cn/n2SAT

输入框显示隐藏默认文本

输入框显示隐藏默认文本http://t.csdn.cn/e5CNf

淘宝二维码浮窗案例

4.4使用clasName修改样式属性

1.使用element.style行内样式操作，获得修改元素样式，如果样式比较少或者功能比较简单的情况下使用

2.element.clasName 类名样式操作.可以用CSS来修改元素样式。适合样式较多功能复杂的情况。

3.切记，在clasName赋值的样式名称不要点号。

4.class因为是个保留字，因此使用className来操作。

5.className会直接更改元素类名，会覆盖原先的类名。

6.className赋值的多个类名之间中间空格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用clasName修改样式属性</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;

        }

        .change {
            width: 200px;
            height: 200px;
            background-color: blue;
            color: #fff;
        }
    </style>
</head>

<body>
    <div>文本</div>
    <script>
        //1.使用element.style行内样式操作，获得修改元素样式，如果样式比较少或者功能比较简单的情况下使用
        //2.element.clasName 类名样式操作.可以用CSS来修改元素样式。适合样式较多功能复杂的情况。
        var text = document.querySelector('div');
        text.onclick = function () {
            this.className = 'change';//千万不要加.点
        }
    </script>
</body>

</html>