DOM总结（一）_设置dom元素权重-CSDN博客

本文链接：https://blog.csdn.net/qq_61516787/article/details/122346078

DOM

一、什么是DOM？
- - 获取页面元素
二、事件基础
- - 什么是事件基础
三、操作元素

一、什么是DOM？

什么是DOM？
文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM接口可以改变网页的内容、结构、样式。
在这里插入图片描述

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

获取页面元素

获取页面中元素的方法？？？

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

<div id="time">2022-1-7</div>
    <script>
    //1.因为我们文档页面从上往下加载，所以先有标签 所以script标签写在下面
    //2.get获取Element元素 by通过驼峰命名法
    //3.参数id是大小写敏感的字符串
    //4.返回的是一个元素对象
    var timer = document.getElementById('time');//通过getElementbyId接口获取DOM标签
    console.log(timer);
    console.log(typeof timer);
    //5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
    console.dir(timer);
    </script>

2.根据标签名获取

<li>知否，知否，应是等你好久1</li>
    <li>知否，知否，应是等你好久2</li>
    <li>知否，知否，应是等你好久3</li>
    <li>知否，知否，应是等你好久4</li>
    <li>知否，知否，应是等你好久5</li>
    <script>
        //返回的是带有指定标签名的对象的集合 以伪数组的形式存储
        //伪数组就是有索引号及长度，但是没有push/shift等方法
        var lis = document.getElementsByTagName('li');//意思是获取整个页面文档的
        console.log(lis);
        console.log(lis[0]);
        //遍历
        for(var i=0;i<lis.length;i++)
        {
            console.log(lis[i]);
        }
        //就算li为空或者只有一个，返回值也是伪数组
        //如何获取父元素内部所有指定标签名的子元素
        var ol=document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>

3.通过HTML5新增的方法获取
document.getElementsByClassName(‘类名’);//根据类名返回元素对象集合

var boxs =document.getElementsByClassName('box');
console.log(boxs);
//2.querySelector返回指定选择器的第一个元素对象
var firstbox=document.querySelector('.box');
console.log(firstbox);
var two=document.querySelector('#nav');//选择器需要加符号
 //3.querySelectorAll
var allBox=document.querySelectorAll('.box');
console.log(allBox);
var lis=document.querySelectorAll('li');
console.log(lis);

4.获取特殊元素
获取body元素

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

获取html标签

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

二、事件基础

什么是事件基础

简单理解：触发———响应的一种机制，事件三要素：事件源、事件类型、事件处理程序。
例：点击一个按钮，触发对话框
（1）事件源：事件倍触发的对象--------按钮
（2）事件类型：如何触发什么事件比如鼠标点击
（3）事件处理程序：通过一个函数赋值的方式完成

<body>
    <button id="btn">唐伯虎</button>
    <script>
        var btn=document.getElementById('btn');
        btn.onclick=function() {
            alert('点秋香');
        }
    </script>
</body>

常见的鼠标事件：

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

三、操作元素

在这里插入图片描述

3.1改变元素内容

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        //当我们点击了按钮，div里面的文字会发生改变
        //1.获取元素
        var btn=document.querySelector('button');
        var div=document.querySelector('div');
        //2.注册元素
        btn.onclick = function() {
            div.innerText=getDate();
        }
        function getDate() {
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var week=date.getDay();
            return '今天是'+year+'年'+month+'月'+day+'日'+arr[week];
        }
    </script>
</body>

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        var div=document.querySelector('div');
        //div.innerText='今天很高兴';//
        //div.innerHTML='<strong>今天</strong>很高兴';//W3C推荐使用
        //这两个属性是可读写的，可以获取元素的内容
        var p=document.querySelector('p');
        //console.log(p.innerText);//去除空格和换行
        console.log(p.innerHTML);//保存空格和换行
    </script>
</body>

3.2修改元素属性

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button><br>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.itc.cn%2Fq_70%2Fimages01%2F20210719%2F907d34c6ec184119a1f09ffa79fd3399.png&refer=http%3A%2F%2Fp6.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644365178&t=0b2a79003909a4c9de3cdb86e77b6755" alt="" title="刘德华">
    <script>
        //修改元素属性
        //1.获取元素
        var ldh=document.getElementById('ldh');
        var zxy=document.getElementById('zxy');
        var img=document.querySelector('img');
        zxy.onclick =function() {
            img.src='https://img1.baidu.com/it/u=1850186416,2274003194&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=261';
            img.title='张学友';
        }
        ldh.onclick=function() {
            img.src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.itc.cn%2Fq_70%2Fimages01%2F20210719%2F907d34c6ec184119a1f09ffa79fd3399.png&refer=http%3A%2F%2Fp6.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644365178&t=0b2a79003909a4c9de3cdb86e77b6755';
            img.title='刘德华';
        }
    </script>
</body>

3.3表单元素的属性操作

利用DOM可以操作如下表单元素的!!!属性

type、value、checked、selected、disabled

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //1.获取元素
        var btn=document.querySelector('button');
        var input=document.querySelector('input');
        btn.onclick=function () {
            input.value='被点击了';
            //如果想要某个表单被禁用不能被点击
            //btn.disabled=true;//disbaled被禁用的意思
            this.disabled=true;
            //this指向的事件函数的调用者
        }
    </script>
</body>

3.4样式属性操作

样式少：element.style
样式多：element.className

<body>
    <div></div>
    <script>
        var div=document.querySelector('div');
        div.onclick =function() {
            div.style.backgroundColor='purple';
        }
    </script>
</body>

JS修改style样式，产生的是行内样式，权重比较高
案例：

//获得焦点onfocus 失去焦点onblur
<input type="text" value="手机">
    <script>
        var text=document.querySelector('input');
        text.onfocus=function() {
        if(this.value=='手机') {
            this.value='';
        }
        this.style.color='#333';
    }
    text.onblur=function() {
        if(this.value=='') {
            this.value='手机';
        }
        this.style.color='#999';
    }
    </script>

循环精灵图核心代码：

body部分ul包含10个li标签
var lis = document.querySelector('li');
for(var i = 0;i<lis.length;i++)
{
	var index = i*44;
	lis[i].style.backpositon='0 -'+index+'px';
}

element.Name将要改变的属性写成一个类将其写进function,例如this.classNmae=‘这个类的名字’;
className会直接更改元素类名，会覆盖原先的类名，如果要保存——this.classNmae='first 这个类的名字

3.5排他思想

排他思想的核心就是用到了循环，首先干掉其他人，再设置自己

//核心代码
for(var i=0;i<btns.length;i++) {
	btns[i].style.backgroundColor='';
}
this.style.backgroundColor='pink';

3.6自定义属性操作

<body>
    <div id="demo" index='1'></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.id);
        //方法二：程序员自定义的属性
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        //设置元素属性
        //方法一：
        div.id='test';//如果修改class的话那就是className
        //方法二：
        div.setAttribute('index',2);//针对自定义
    </script>
</body>

移除属性：div.removeAttribute(‘index’);

H5要求自定义属性都以data开头

<body>
    <div gettime='20' data-index='2' data-list-name-me='3'></div>
    <script>
        var div=document.querySelector('div');
        //console.log(div.gettime);
        div.setAttribute('date-time',20);
        //H5新增的获取自定义属性的方法
        console.log(div.dataset);//dataset是一个集合存放了所有data开头的属性
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        //如果自定义属性含有多个-连接的单词，我们获取的时候采用驼峰命名法
        console.log(div.dataset.listNameMe);
        console.log(div.dataset['listNameMe']);
    </script>
</body>