JS（WebAPI部分）

news/2024/5/3 23:12:03/文章来源:https://blog.csdn.net/weixin_51584115/article/details/126599331

文章目录

- DOM
- - DOM 简介
  - 获取元素
  - 事件基础
  - - 事件三要素
    - 执行事件的步骤
  - 操作元素
- ROM

MDN文档链接： https://developer.mozilla.org/zh-CN/docs/Web/API
在这里插入图片描述

DOM

DOM 简介

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
在这里插入图片描述

获取元素

因为文档页面从上往下加载，所以先要写标签，script要写到标签下面
根据 ID 获取
getElementById() 方法，返回带有 ID 的元素对象。
document.getElementById(‘id’);

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

<body><div id="time">2022-8-30</div><script>// 因为文档页面从上往下加载，所以先要写标签，script要写到标签下面var timer=document.getElementById('time');console.log(timer);console.log(typeof timer);//返回的是一个对象console.dir(timer);</script>
</body>

在这里插入图片描述
根据标签名获取
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName(‘标签名’);
注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的
返回的是元素对象的伪数组，如果页面中没有该元素，返回的是空的伪数组。

<body><ul><li>这是一个标签1</li><li>这是一个标签2</li><li>这是一个标签3</li><li>这是一个标签4</li><li>这是一个标签5</li></ul><script>//返回的是元素对象的伪数组var lis=document.getElementsByTagName('li');console.log(lis);console.log(lis[0]);//遍历元素for(var i=0;i<lis.length;i++){console.log(lis[i]);}</script>
</body>

在这里插入图片描述
获取父元素内部的指定标签名的子元素
注意：父元素必须是一个指定的元素

<body><ul><li>这是一个标签1</li><li>这是一个标签2</li><li>这是一个标签3</li><li>这是一个标签4</li><li>这是一个标签5</li></ul><ol id="ol"><li>1234567</li><li>1234567</li><li>1234567</li></ol><script>var ol=document.getElementsByTagName('ol');console.log(ol[0].getElementsByTagName('li'));//必须指明哪一个元素var ol1=document.getElementById('ol');console.log(ol1.getElementsByTagName('li'));</script>
</body>

document.getElementsByClassName(‘类名’)；根据类名返回元素对象集合
document.querySelector(‘选择器’); 根据指定选择器返回第一个元素对象
根据类名class选择，加 “ . ” ，根据id选择，加 “ # ” ，根据标签选择，不用加
document.querySelectorAll(‘选择器’); 根据指定选择器返回所有对象

<body><div class="box">盒子</div><div class="box">盒子</div><div id="nav"><ul><li>产品</li><li>首页</li></ul></div><script>// getElementsByClassName(‘类名’) 根据类名返回元素对象集合var boxes=document.getElementsByClassName('box');console.log(boxes);// document.querySelector('选择器')  根据指定选择器返回第一个元素对象var firstBox=document.querySelector('.box');//根据class选择console.log(firstBox);var nav=document.querySelector('#nav');//根据id选择console.log(nav);var li=document.querySelector('li');//根据标签选择console.log(li);// document.querySelectorAll('选择器')  根据指定选择器返回var allBox=document.querySelectorAll('.box');console.log(allBox);</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>
</head>
<body><script>// 获取body元素var bodyEle=document.body;console.log(bodyEle);console.dir(bodyEle);// 获取html元素var htmlEle=document.documentElement;console.log(htmlEle);</script>
</body>
</html>

在这里插入图片描述

事件基础

在这里插入图片描述

事件三要素

事件源（谁）
事件类型（什么事件）
事件处理程序（做啥）

示例：

<body><!-- 点击一个按钮，弹出对话框 --><button id="btn">唐伯虎</button><script>var btn=document.getElementById('btn');//获取事件源// 事件类型，如何触发事件      // 事件处理程序 通过一个函数赋值的方式完成btn.onclick=function(){alert('点秋香');}</script>
</body>

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

示例：

<body><div>123</div><script>var div=document.querySelector('div');//获取事件源//注册事件，添加事件处理程序div.onclick=function(){console.log('我被选中了');}</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>div,p {width: 300px;height: 30px;line-height: 30px;color: #fff;background-color: blue;}</style>
</head><body><button>显示当前系统时间</button><div>某个时间</div><p>1123</p><script>var btn=document.querySelector('button');var div=document.querySelector('div');btn.onclick=function(){div.innerText= getDate();}function getDate() {var date=new Date();var year=date.getFullYear();var month=date.getMonth();var dates=date.getDate();var day=date.getDay();var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];return '今天是：'+year+'年'+month+'月'+dates+'日，本周'+arr[day];}var p=document.querySelector('p');p.innerText=getDate();//可以不用添加事件</script>
</body>
</html>

在这里插入图片描述
innerText 和 innerHTML 的区别

innerText不识别 html标签；innerHTML 可以识别

<body><div></div><script>var div=document.querySelector('div');div.innerText='<strong>今天是：</strong>2019';div.innerHTML='<strong>今天是：</strong>2019';</script>
</body>

在这里插入图片描述

2. 两个属性都可以可以获取元素里的内容，innerText 会去除换行和空格；innerHTML 保留空格和换行。

<body><div></div><p>我是文字<span>123</span></p><script>// 可以获取元素里的内容var p=document.querySelector('p');console.log(p.innerText);console.log(p.innerHTML);</script>
</body>

在这里插入图片描述

格式：元素.属性=赋值；
案例：点击切换图片

<body><button id="ldh">刘德华</button><button id="zxy">张学友</button> <br><img src="images/ldh.jpg" alt="" title="刘德华"><script>// 修改元素属性 srcvar ldh=document.getElementById('ldh');var zxy=document.getElementById('zxy');var img=document.querySelector('img');zxy.onclick=function(){img.src='images/zxy.jpg';img.title='张学友';}ldh.onclick=function(){img.src="images/ldh.jpg";img.title='刘德华';}</script>
</body>

在这里插入图片描述

<body><button>按钮</button><input type="text" value="输入内容"><script>var btn=document.querySelector('button');var input=document.querySelector('input');btn.onclick=function(){input.value='被点击了';// btn.disabled=true;  也可写作：this.disabled=true;// this指向的是时间函数的调用者（按钮）}</script>
</body>