DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_47907048/article/details/121118183

DOM上

DOM（上）

DOM（上）

主要学习页面交互功能

简介

API 和Web API

API

是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

Web API

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM 和 DOM)

DOM

简介

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

DOM树

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

获取元素

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

获取页面中的元素可以使用一下几种方式：

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

getElementById获取元素

<body>
    <div id="time">2021-4-22</div>
	<script>
        var timer = document.getElementById('time');
		console.log('timer');                 //返回的是一个元素对象
		console.log('typeof timer');          //object
		console.dir('timer');                 //打印我们返回的元素对象 更好的查看里面的属性和方法
	</script>
</body>

getElementsByTagName获取元素

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

<ul>
    <li>知否知否</li>
	<li>知否知否</li>
	<li>知否知否</li>
</ul>
<script>
    //返回的是 获取过来元素对象的集合 以伪数组的形式存储的
    var lis = document.getElementsByTagName('li');
	console.log(lis);

注意

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
得到的元素是动态的
如果页面中只有一个li 返回的还是伪数组的形式
如果页面中没有这个元素，返回的是空的伪数组
element.getElementsByTagName(‘标签名’);
父元素必须是指定的单个元素

通过HTML5新增的方法获取

document.getElementsByClassName('类名'); //根据类名返回元素对象集合

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

document.querySelectorAll('选择器'); //根据指定选择器返回

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子1</div>
	
	<script>
        var boxs = document.getElementsByClassName('box');
		console.log(boxs);
		
		var firstBox = document.querySelctor('.box');
		console.log(firstBox);

		var allBox = document.querySelectorAll('.box');
		console.log(allBox);
	</script>
</body>

获取特殊元素

获取body 元素

var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);

获取html元素

var htmlEle = document.documentElement;
console.log(htmlEle);

事件基础

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

事件三要素

事件源事件类型事件处理程序

事件源

事件被触发的对象按钮

var btn = document.getElementById('btn');

事件类型

如何触发比如鼠标点击(onclick) 鼠标经过键盘按下

事件处理程序

通过一个函数赋值的方式完成

var btn = document.getElementById('btn'); 
btn.onclick = function(){
    alert('点秋香');
}

执行事件的步骤

获取事件源

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

注册事件
添加事件处理程序

div.onclick = function(){
    console.log('我被选中了');
}

操作元素

操作元素内容

element.innerText

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

element.innerHTML

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

<div></div>
<script>
    var div = document.querySelector('div');
	div.innerText = '今天是： 2021';

	div.innerHTML = '今天是： 2021'
</script>

区别

innerText 不识别html标签非标准去除空格和换行

innerHTML 识别html标签标准 W3C标准保留空格和换行

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

修改表单属性

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
        
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');

        btn.onclick = function(){
            input.value = '被点击了';
            this.disabled = true;
        }
    </script>

</body>