DOM

最新推荐文章于 2023-04-21 11:31:22 发布

Hattie~

最新推荐文章于 2023-04-21 11:31:22 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/qq_40405058/article/details/105002786

版权

1.什么是DOM？

文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。

通过DOM接口可以改变网页的内容，结构，样式。

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

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

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

2.获取元素

（1）根据ID获取

getElementById('')

console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法

var timer = document.getElementById('time');

console.dir(timer) // div#time

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

var lis = document.getElementsByTagName('li')

（2）根据标签名获取

element.getElementsByTagName() 可以得到这个元素里的某些标签

var li2 = document.getElementById('nav');
var navlis = nav.getElementsByTagName('li');
console.log(navlis);

(3) 通过H5新方法获取

H5新增标签选择器

1. document.getElementsByClassName('类名');

2.   document.querySelector ('') // 返回指定选择器的第一个元素对象
        var firstbox = document.querySelector('.box');
        console.log(firstbox); // 切记加符号 .box #box

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

(4) 获取特殊元素（html,body)

1. 获取 body元素 document.body // 返回 body 元素对象

2.获取html 元素对象 document.documentElement // 返回 html 元素对象

3.事件

1. 事件由三部分组成事件源事件类型事件处理程序

（1）事件源事件被触发的对象按钮就是事件源

（2）事件类型如何触发什么事件如鼠标点击（onclick）鼠标滑过、键盘按下

（3）事件处理程序通过一个函数赋值的方式完成

3，事件基础

1. 获取事件

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

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

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

4.操作元素

javaScript的DOM 元素可以改变网页内容，结构和样式我们可以用DOM 来操作元素改变里面的

内容、属性等。以下所有均为属性

4.1 改变元素内容

element.innerText // 不识别 html 标签，非标准老版本ie 不支持也去除换行和空格

element.innerHTML // 不识别 html 标签 W3C 标准保留空格和换行

均可读写

4.3 表单元素的属性操作

type 、 value、checked、selected、disabled（是否可以使用）

input.value 来改变input 的内容

this.disabaled = true; // 禁用 this指向的事件函数的调用者

4.4 样式属性操作

1.element. style 行内样式操作样式少功能简单时使用

 
var ba = document.querySelector('div');
	ba.onclick = function () {
ba.style.backgroundColor = 'pink';
}

2.element.className 类名样式操作适用于样式多的

<style>
        div {
		width: 100px;
		height: 100px;
		background-color: #ccc;
	}
	.change {
		width: 200px;
		height: 300px;
		background-color: pink;
		color: #999;
       }
</style>

<body>
    <div>123</div>
<script>
        var ba = document.querySelector('div');
	ba.onclick = function () {
		// ba.style.backgroundColor = 'pink';
		// 让当前元素的类名 改为change
		this.className = 'change';
	}
</script>

注意：js 中采用驼峰命名法 fontSize、backgroundColor

2. js 修改style 样式操作，产生的是行内样式，css 权重较高，因此会覆盖掉

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

4.若想不覆盖加上现在的类

this.className = ' first change' ; /// first 为原先类名

4.5 onfocus 和 onblur

1. 获取焦点 onfocus

2.失去焦点 onblur

   <input type="text" value="手机" id="">


	 <script>
		
		var text = document.querySelector('input');
		text.onfocus = function () {
			if(text.value === '手机') {
				text.value = '';

			}
			text.style.color = 'black';
		}
		text.onblur = function () {
			if (text.value === '') {
			text.value = '手机';
		}
		text.style.color = '#999';
	}
	</script>

4.6 排他思想

<button>按钮1</button>
	<button>按钮1</button>
	<button>按钮2</button>
	<button>按钮3</button>
	<button>按钮4</button>
	<button>按钮5</button>
	<script>
		var btns = document.querySelectorAll('button');
		 //btns 得到的时伪数组  里面的每一个元素  btns[i] 
		for (var i = 0 ; i < btns .length; i++) {
		     btns[i].onclick = function () {
		     	// 先去掉所有按钮背景颜色  
			for (var i = 0; i < btns .length; i++) {
			 btns[i].style.backgroundColor = '';
		}
		//2.然后再让当前按钮背景颜色 为 pink
			   this.style.backgroundColor = 'pink';
		}
	}
	</script>

如图：