DOM基础

DOM

一、元素操作

1、获取元素

1.1 通用

getElementById、getElementsByTagName

// document代表整个页面；我们也可以写其他的元素对象

// 从页面获取元素，返回的一个对象
let a = document.getElementById();

console.log(a);		//打印的结果是该id所在的整个标签
// 打印我们返回的元素对象，更好的查看里面的属性和方法
console.dir(a);

//------------------------------------------------------------

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

// 返回的是个伪数组[li,li,li,li,li]，里面每一项都是一个元素对象
// 如果元素为0，返回的是个空数组
let a = document.getElementsBuTagName('li');

我们也可以先获取ul再通过ul获取li
let ulArr = document.getElementsByTagName('ul');
let ul = ulArr[0].getElementsByTagName('li');

1.2 html5以上版本

IE9以上浏览器或者所有移动端

document.getElementsByClassName()、document.querySelector()、document.querySelectorAll()

<div class="a">哈</div>
<div class="a">哦</div>
<div class="a">嗯</div>
<div id="myId">额</div>

// 1、返回的是个伪数组，其中包含每个元素对象
document.getElementsByClassName('a');

// 2、返回指定选择器的第一个元素对象
document.querySelector('.a');	//console.log后显示<div class="a">哈</div>
document.querySelector('#myId');  //console.log后显示<div id="myId">额</div>

// 3、返回的是个伪数组
document.querySelectorAll('div');	

1.3 获取body与html

// 返回body
let bo = document.body
// 返回html
let ht = document.documentElement

2、元素事件

三要素：事件源、事件类型的（如何触发）、事件处理程序（函数赋值）

<button id="btn">按钮1</button>
<script>
    // 步骤：
    // 1、获取事件源
	let btn = document.querySelector('#btn');
	
	// 2、绑定事件
	// 3、添加处理程序 
	btn.onclick = function () {
		
	}
</script>

另：

鼠标事件
onclick
onmouseover	鼠标在某元素上面时
onmouseout	鼠标离开某元素时
onfocus	元素获得焦点
onblur	元素失去焦点
onmousemove	鼠标移动时
onmouseup	鼠标点击后抬起时
onmousedown	鼠标按下时

3、设置属性、样式、内容

3.1 设置内容

element.innerText = ''
element.innerHTML = ''

3.2 设置属性

1、改

• elem.属性名 = ‘属性值’ // 属性名用驼峰命名法
• elem.setAttribute(‘属性名’,‘属性值’); // 可设置自定义属性，属性名不用驼峰命名法

注：H5为了区分自定义属性，规定所有自定义属性是data-开头，如

2、查

• elem.属性名 // 获取的只能是内置的属性

• elem.getAttribute(‘属性名’) // 也可获取自定义属性

• h5新增获取自定义属性（ie10以后才支持）：

  ① data-aaa=“nihao”：elem.dataset.aaa或者 elem.dataset[‘aaa’]

  ② dataset是一个集合，当我们自定义属性时，h5就会自动地（且只能）将所有前缀为data-的属性放到dataset集合中，所以我们才可以只用data-后的名来获取该属性

  ③ 如果data-aaa-bbb：获取时需要用驼峰命名法：elem.dataset[‘aaaBbb’]

<div id="12" data-aaa="4444" data-list-aaa-bbb="788"></div>

<script>
	let div = document.querySelector('div');
    
    // .属性名
	console.log(div.id);	// 12
	console.log(div.data-aaa);	// undefine

    // .getAttribute()
	console.log(div.getAttribute('id'));	// 12
	console.log(div.getAttribute('data-aaa'));	// 4444
    
    // h5新特性：.dataset.xxx或dataset['xxx']
    console.log(div.dataset.aaa);	// 4444
    或者console.log(div.dataset['aaa']);
    // 如果data-后有多个-隔开的属性名，获取时需要用驼峰命名法
 						// data-list-aaa-bbb
    console.log(div.dataset.listAaaBbb);
    或者console.log(div.dataset['listAaaBbb']);
</script>

3、删

• elem.removeAttribute(‘属性名’)

<button id="a">A</button>
<button id="b">B</button>
<img src="a.png" >
    
<script>
	let a = document.querySelector('#a'); 
	let b = document.querySelector('#b');
	let img = document.querySelector('img');
	
	a.onclick = function () {
        img.src = 'a.png';
    }
	b.onclick = function () {
        img.src = 'b.png'
    }
	
</script>

3.3 设置表单属性

• type
• value
• checked：针对单选框与复选框
• selected：针对下拉列表
• disabled

不能用innerHTML和innerText修改表单的值

<button>点击</button>
<input type="text" value="">
    
    
<script>
    let input = document.querySelector('input');
	document.querySelector('button').onclick = function () {
    	input.value = '被点击了';
        
        // this代表的是函数的调用者
        this.disabled = true;	// 禁用
	}
</script>

3.4 设置样式

1、行内样式：element.style.xxx = ‘’

2、类名样式：element.className = ‘’

<div style="width:200;height:200"></div>

<script>
	let div = document.querySelector('div');    
	div.onclick = function () {
     // 注：
     //	  1、this指向当前调用者，此处为div
     //	  2、js改变css样式时，css的属性采用驼峰命名发，而不是css中用中划线分割

     this.style.backgroundColor = 'blue';
 }
</script>

<style>
	div {
        width:100px;
    }    
	.change {
        background-color: black;
        height: 100px;
    }
	.a {
        margin:50xp;
    }
</style>

<div></div>

<script>
	let div = document.querySelector('div');
	div.onclick = function () {
        this.className = 'change a';
    }
</script>

注意：

1. js改变css样式时，css的属性采用驼峰命名发，而不是css中用中划线分割
2. js改变的style样式后，是行内样式，所以权重高

二、节点操作

1、查

1.1 父节点

获取elem的父节点：

​ elem.parentNode：获取父节点（w3c）

​ elem.parentElement: 获取父节点（ie）

注：

• 节点没有父节点时返回null
• 找父节点时使用就近原则

<div>
	<li></li>
</div>

<script>
	let li = document.querySelector('li');
    console.log(li.parentNode);		//打印结果：<div><li></li></div>
    
</script>

1.2 子节点

（1）elem.childNodes：得到的是个集合，包含 文本节点（换行…） 和 元素节点

（2）elem.children：获取所有的元素子节点，开发常用

（3）elem.firstChild：返回第一个子节点，包括文本节点

​ elem.lastChild：返回最后一个子节点，包括文本节点

（4）ie9以上：

​ elem.firstElementChild：返回第一个子元素节点

​ elem.lastElementChild：返回最后一个子元素节点

（5）实际开发写法：

​ elem.children[0]：获取头元素节点

​ elem.children[elem.children.length - 1]：获取尾元素节

<ul>
	<li id="1"></li>
    <li id="2"></li>
    <li id="3"></li>
    <li id="4"></li>
</ul>

<script>
	let ul = document.querySelector('ul');
    console.log(ul.childNodes);		
    // 返回的结果集合中共有9个元素：第一个是换行（文本节点）；第二个是<li id="1"></li>（元素节点）；第三个是换行（文本节点）；第四个是<li id="2"></li>（元素节点）；...
    
    
    // 返回所有元素节点的集合
    console.log(ul.children)
</script>

我们可以对其进行遍历可通过每个元素的nodeType来找出元素节点：elem.nodeType

• 元素节点的nodeType为1
• 文本节点的nodeType为2

1.3 兄弟节点

（1）elem.nextSibling：得到下一个兄弟节点，找不到返回null，包含文本节点

（2）elem.previousSibling：得到上一兄弟节点，找不到返回为null，包含文本节点

ie9以上支持：

（1）elem.nextElementSibling：返回下一个元素节点

（2）elem.previousElementSibling：返回上一个元素节点

2、增

2.1 创建

（1）document.createElement(‘’)：创建节点；里面不用加尖括号，直接写标签名。效率比较高

（2）innerHTML = ‘’：一个个拼接时效率特别低，如果将所有创建完，再一次性innerHTML，效率会特别高，超过createElement。

（3）document.write(‘’)：会重绘文档流，之前的被覆盖；加尖括号

2.2 添加

（2）node.appendChild(‘’)：添加子节点。

​ 注：append()是jquery的方法，这里的appendChild()是原生js的方法

（3）node.insertBefore(插入谁, 在谁的前面)：

<ul>
	<li id="1">123</li>
</ul>
<script>
	let ul = document.querySelector('ul');
    let li = document.querySelector('#1');
    
    let myLi = document.createElement('li');	// 1、创建li标签
    myLi.innerText = '你好';
    ul.appendChild(myLi);		// 2、在123后面又插入了一个标签<li>你好</li>
    
    let myLi2 = document.createElement('li');	// 1、创建li标签
    ul.insertBefore(myLi2, li);		// 2、在123前面插入了一个标签<li></li>
    
</script>

3、删

3.1 删除节点

（1）node.removeChild(childNode); // 删除输入的孩子节点，并返回删除的节点

4、克隆节点

node.cloneNode();	// 方法返回一个节点的复制品

注：

① 如果括号内为空或者为false，称为浅拷贝，只复制当前节点，不复制其内容（子节点、文本等）；括号内为true时为深拷贝。

② 不论深拷贝还是浅拷贝，拷贝后的节点会随着主节点变化而变化

三、DOM重点

包括：创建、增、删、改、查、属性操作、事件操作

1、创建

1. document.write
2. innerHTML
3. createElement

2、增

1. appendChild()
2. insertBefore(插入谁, 在谁的前面)

3、删

1. removeChild

4、改

1. 属性：src、href、title等
2. 内容：innerHTML、innerText
3. 表单：value、type、disabled等
4. 样式：style、className

5、查

1. getElementById、getElementsByTagName
2. querySelector、querySelectorAll
3. 父节点（parentNode）、子节点（children）、兄弟节点（previousElementSibling、nextElementSibling）

6、设置属性

1. setAttribute：会覆盖
2. getAttribute
3. removeAttribute：移除属性

7、设置事件

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