DOM基础

最新推荐文章于 2023-11-29 08:47:53 发布

冰月黎

最新推荐文章于 2023-11-29 08:47:53 发布

阅读量853

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/content899/article/details/126938579

版权

DOM

文章目录

DOM简介

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

DOM树：包含文档、元素和节点。

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

获取页面元素

console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

在这里插入图片描述

1、根据ID获取

【注】：参数id是大小写敏感的字符串，返回的是对象

<body>
    <div id = 'time'>2022</div>
    <script>
        var timer = document.getElementByID('time');
        console.log(timer);
    </script>
</body>

2、根据标签名获取(获取某一类元素或标签)

【注】：返回的是指定标签名的对象的集合，所以我们想要操作里面的元素就需要遍历。
返回得到的元素对象是动态的
如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

<ul>
    <li>知否知否1</li>
    <li>知否知否2</li>
    <li>知否知否3</li>
    <li>知否知否4</li>
    <li>知否知否5</li> 
</ul>
<ol class="ol">
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
</ol>

获取页面中所有的指定元素：document.getElementsByTagName(‘li’)

<script>
    // 获取元素
    var lis = document.getElementsByTagName('li');
    // 通过遍历打印每个数组
    for(var i = 0; i < lis.length; i++){
     
        console.log(lis[i]);
    }
</script>

获取页面中父元素内部的指定元素：element.getElementsByTagName(‘li’)

【注】：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

<script>
    var ol = document.getElementsByTagName('ol');
    console.log(ol[0].getElementsByTagName('li'));
</script>

这样会比较麻烦，我们可以给ol指定一个id

<script>
	var ol = document.getElementsByID('ol');
	console.log(ol.getElementsByTagName('li'));
</script>

3、通过 HTML5 新增的方法获取（考虑网页兼容问题，IE9以上版本支持）

<div class= "box">盒子</div>
<div class= "box">盒子</div>
<div id= "nav">
    <ul>
        <li>产品</li>
        <li>首页</li>
    </ul>
</div>

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

<script>
	var boxs = document.getElementsByClassName('box');
	console.log(boxs);
</script>

document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象

<script>
    var boxs = document.querySelector('.box');
    console.log(boxs);
    var li = document.querySelector('li');
    console.log(li);
</script>

document.querySelectorAll(‘选择器’); // 根据指定选择器返回所有元素对象

<script>
    var nav = document.querySelectorAll('#nav');
    console.log(nav);
    var lis = document.querySelectorAll('li');
    console.log(lis);
</script>

【注】querySelector 和 querySelectorAll里面的选择器需要加符号,如:document.querySelector(‘#nav’);

4、获取特殊元素（body，html）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
    </head>
    <body>
    </body>
</html>

获取body元素

<script>
    var bodyEle = document.body;
    console.log(bodyEle);
</script>

获取html元素

<script>
    var htmlEle = document.documentElement;
    console.log(htmlEle);
</script>

事件基础

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

事件三要素

在这里插入图片描述

执行事件的步骤

在这里插入图片描述

常见的鼠标事件

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

例如：点击123弹出“我被选中了”

<div>123</div>
<script>
    // 获取事件源
    var div = document.querySelector('div');
    // 绑定事件并添加处理程序
    div.onclick = function() {
     
        alert('我被选中了');
    }
</script>

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

操作元素

操作元素是DOM的核心内容

在这里插入图片描述

1、改变元素内容

element.innerText

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

element.innerHTML

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

2、常用元素的属性操作

1、innerText、innerHTML 改变元素内容
2、src、href
3、id、alt、title

案例：根据时间，显示不同的问候语及图片

<div>上午好</div>
<img src = "images/s.gif" >
<script>
    //获取事件源
    var div = document.querySelector('div');
    var img = document.querySelector('img');
    var date = new Date();
    var h = date.getHours();
    if(h < 12){
     
        div.innerHTML = '上午好！';
        img.src = "images/s.gif";
    }else if(h < 18){
     
        div.innerHTML = '下午好！';
        img.src = "images/x.gif";
    }else{
     
        div.innerHTML = '晚午好！';
        img.src = "images/w.gif";
    }
</script>

3、表单元素的属性操作

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

案例：仿京东显示密码

<div class="box">
    <div class= "input">
        <!-- 密码 -->
        <div class= "password">
            <label>
                <img src= "images/close.png" id=