JavaScript DOM操作

最新推荐文章于 2024-07-12 16:27:40 发布

Harlynn_

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量168

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Harlynn_/article/details/109584574

版权

JavaScript DOM操作

1 获取元素

名称	说明
document.getElementById(‘id名’)	通过id获取元素
document.getElementsByTagName(‘属性名’)	通过属性名获取元素
document.getElementsByName(‘name名’)	通过name名获取元素
document.getElementsByClassName(‘类名’)	通过class名获取元素
document.querySelector(’#id名’)	通过选择器获取元素
document.querySelectorAll(’.class名’)	通过选择器获取所有含有class名的元素

var box = document.getElementById('box');
console.log(box); // 返回id为box的标签

var lis = document.getElementsByTagName('li');
console.log(lis); // 返回HTMLCollection伪数组，是元素集合

var txt = document.getElementsByName('txt');
console.log(txt); // 返回NodeList伪数组，是节点集合

var oneLi = document.getElementsByClassName('one');
console.log(oneLi); // 返回HTMLCollection伪数组，是元素集合

var btn = document.querySelector('#btn'); // 可以写类选择器和id选择器
console.log(btn);
var lis = document.querySelector('li'); // 若输入标签名将返回获取的第一个元素
console.log(lis);

2 属性

2.1 获取属性

通过获取的元素加点加属性名获取，如：href、title、id、src、className等

var div = document.getElementById('box');
console.log(div.id);  // box

2.2 一些常用属性

2.2.1 innerHTML、innerText和textContent

这两个属性都可以添加文本到页面中，但是innerHTML能添加标签而innerText不能

名称	说明
innerHTML	设置或返回标签和文本，设置内容时相当于字符串拼接
innerText	设置或返回文本，早期火狐存在兼容性问题
textContent	设置或返回文本且保留空格换行字符

解决innerText兼容性问题

function fn(el) {
  	if (typeof el.innerText === 'string') {
    	return el.innerText
  	} else {
    	return el.textContent
  	}
}

2.2.2 自定义属性

getAttribute()：获取标签行内属性
setAttribute()：设置标签行内属性
removeAttribute()：移除标签行内样式

以上三种属性可以获取标签内的任意行内属性

2.2.3 其他属性操作

表单元素属性
使用style设置标签的行内样式

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'pink';

直接修改类名

var box = document.getElementById('box');
box.className = 'show';
console.log(box.className);  // show

3 事件

3.1 常用事件

名称	说明
onclick	鼠标点击事件，一般用于按钮等需点击触发的事件
onfocus	鼠标聚焦事件，一般用于文本输入框
onblur	鼠标失去焦点事件，一般用于input输入输入框
onmouseup	鼠标按键放开事件
onmousedown	鼠标按键按下事件
onmousemove	鼠标移动事件
onkeyup	键盘按键抬起事件
onkeydown	键盘按键按下事件
onkeypress	键盘按键按下并放开事件，不适用于所有键，如：Alt、Ctrl、Shift、Esc

3.2 添加/移除事件

使用on添加事件，事件名参考3.1

btn.onclick = function () {
  	alert(222)
  	btn.onclick = null // 解绑事件
}

用on注册事件只能注册一次，再注册会覆盖掉之前的代码

使用addEventListener添加事件

语法：addEventListener(‘事件名’, 回调函数)，称为事件监听，由DOM触发

 btn.addEventListener('click', function () {
   	 alert(111)
 })
 btn.addEventListener('click', function () {
   	 alert(222)
 }) // 先弹出111再弹出222

addEventListener可以添加多个事件，但仍有一些缺点：

有兼容性问题，IE9之前必须使用attachEvent实现添加多个事件的效果，但是谷歌不支持attachEvent
this指向的是window而不是指向触发函数的元素
一般将事件封装成函数再使用，否则无法移除

 btn.addEventListener('click', fn, true) 
 function fn() {
 	 alert(222)
 }
 btn.removeEventListener('click', fn, true) // 移除事件

3.3 事件冒泡/事件捕获

事件冒泡：当一个对象触发了某个事件，而这个事件向自己的父级传播，由内向外，直到执行到最高的层次

事件捕获：当一个对象触发了某个事件，而这个事件会从最外层开始，由外向内，直到执行到这一事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 300px;
            height: 300px;
            background-color: #ff3040;
        }
        #box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box3 {
            width: 100px;
            height: 100px;
            background-color: hsl(189, 100%, 59%);
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        var box1 = document.getElementById('box1')
        var box2 = document.getElementById('box2')
        var box3 = document.getElementById('box3')
        var boxs = [box1, box2, box3]
        for (var i = 0; i < boxs.length; i++) {
        	// addEventListener的第三个参数为true是事件捕获，false是事件冒泡  
            boxs[i].addEventListener('click', function () {
                console.log(this.id);
            })
        }
     	// 点击最内层的盒子，事件捕获依次输出box1 box2 box3，事件冒泡依次输出box3 box2 box1 
	</script>
</body>
</html>

3.4 事件委托

利用事件冒泡的特性，将自己的事件委托给父亲执行，从而减少DOM执行的次数，提高性能

target：返回触发事件的节点

<ul id="box">
  	<li>1</li>
  	<li>2</li>
  	<li>3</li>
  	<li>4</li>
</ul>
<script>
  	var box = document.getElementById('box')
  	//e 事件对象
  	box.onclick = function (e) {
    	console.log(e.target); 
    	e.target.style.backgroundColor = 'pink'
  	}
</script>

3.5 阻止事件传播方式

标准方式：event.stopPropagation();
IE低版本：event.canaelBubble = true; 标准中已废弃

4 节点

4.1 节点属性

nodeType：节点的类型
- 1：元素节点
- 2：属性节点
- 3：文本节点
nodeName：节点的名称
nodeValue：节点值
- 元素节点的nodeValue始终是null

4.2 节点操作

方法

名称	说明
appendChild()	添加子元素
insertBefore(newItem, existingItem)	在元素前添加新元素，注意是父元素调用这个函数，在existingItem前添加newItem
removeChild()	移除子元素
replaceChild()	替换子元素

创建元素
- 通过document.write()，会重绘页面，覆盖原先代码
- 通过innerHTML属性添加元素
- 通过节点创建元素（推荐）

document.write('<p> hhh </p>');
document.body.innerHTML = '<p>lll</p>'; 

var div = document.createElement('div'); // 创建一个div元素
document.body.appendChild(div); // 将创建的div放到body中

4.3 节点层次

名称	说明
parentNode	获取父级元素
childNodes	获取子节点
children	获取子元素
nextSibling/previousSibling	获取下一个节点
nextElementSibling/previousElementSibling	获取下一个元素，有兼容性问题，IE9后支持
firstChild/lastChild	获取第一个/最后一个子节点

5 补充

5.1 取消默认行为

标签取消默认行为

<a href="#" id="myA">跳转</a>
<script>
    var link = document.getElementById('myA')
    link.onclick = function () {
        // 会取消默认行为，让获取的a标签不再拥有点击事件
        return false
    }
</script>

事件取消默认行为：event.preventDefault()

Harlynn_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM操作

JavaScript DOM操作1 获取元素名称说明document.getElementById(‘id名’)通过id获取元素document.getElementsByTagName(‘属性名’)通过属性名获取元素document.getElementsByName(‘name名’)通过name名获取元素document.getElementsByClassName(‘类名’)通过class名获取元素document.querySelector(’
复制链接

扫一扫