JavaScript——DOM（笔记）

---

DOM

DOM（Document Object Model）即文档对象模型
文档：一个页面就是一个文档，DOM中使用document
元素：页面中所有标签都是元素，DOM中使用element
节点：网页中所有元素都是节点（标签，属性，文本，注释等）

---

获取元素

获取元素方法	说明
document.getElementById(‘id名’);	通过id获取元素
document.getElementsByClassName(‘class名’);	通过class获取元素，返回元素对象的集合
document.getElementsByTagName(‘标签名’);	通过标签名获取元素，返回元素对象的集合
document.getElementsByName(‘name名’)	通过name获取元素，返回元素对象的集合
document.querySelector(‘选择器’);	通过指定选择器返回第一个元素对象，选择器中需要加符号
document.querySelectorAll(‘选择器’);	返回指定选择器的所有元素对象集合 可以指定父节点
document.body	获取body元素
document.documentElement	获取html元素

<div id="box" class="d_box">这是一个盒子</div>
<div class="d_box">这是二个盒子</div>
<input type="text" name="tex"><input type="text" name="tex"><input type="text" name="name">

var box = document.getElementById('box'); // id获取 唯一  第一个div的节点
var d_box = document.getElementsByClassName('d_box'); // 获取所有class为d_box的元素 所有div 伪数组的形式存放
var divs = document.getElementsByTagName('div'); // 获取所有标签为div的元素 所有div
var tex = document.getElementsByName('tex'); // 获取所有name名为tex的元素  所有name="tex"的表单控件
var div = document.querySelector('.d_box'); // 第一个class选择器为.d_box的元素
var divs = document.querySelectorAll('.d_box'); // 所有class选择器为.d_box的元素
var bd = document.body; // body元素
var hl = document.documentElement; // html元素

获取HTML的值

方法	说明
element.innerText(可读写)	从起始位置到终始位置的内容,抹去HTML标签，换行空格会被去掉
element.innerHTML(可读写)	从起始位置到终始位置的全部内容,包括HTML标签，保留空格会被去掉

<div class="box">
	<h4>这是一段内容</h4>
</div>

var box = document.querySelector('.box');
console.log(box.innerHTML); // <h4>这是一段内容</h4> 包括标签h4
console.log(box.innerText); // 这是一段内容 // 只有内容
box.innerHTML = '<h3>这是一段新的内容</h3>'  // 修改内容包括标签
box.innerText = '<h3>这是一段新的内容</h3>' // 修改内容标签没作用

样式

方法	说明
element.style.样式	获取 HTML 元素的行内样式值或修改
element.className	通过类名修改样式属性
element,属性	获取元素属性，内置属性值

// img.src图像链接 input.checked 选中 input.value 内容 input.disabled 禁用
var img = document.querySelector("img");
img.src = "1.jpg"; // 获取属性的样式修改 元素.属性
console.log(img.src);

<div class="box" style="color: red;">
	<h4>这是一段内容</h4>
</div>

var box = document.querySelector('.box');
console.log(box.style.color); // 通过style.color获取行内样式的颜色
box.style.color = "blue"; // 内容改为蓝色

var box = document.querySelector(".box");
box.className = "tex";  // 会修改.box 的类名为.tex

属性

方法	说明
element.getAttribute(‘属性’)	获取 HTML 元素的属性值或自定义属性值
element.setAttribute(‘属性’,‘值’)	创建属性，或修改内置属性值
element.removeAttribute(‘属性’)	移除属性

<div id="demo"></div>

var div = document.querySelector("div");  // 获取元素
console.log(div.id); // 获取id属性
console.log(div.getAttribute("id")); // 获取id属性
div.id = 'test'; // 修改id属性
div.setAttribute("index",'1'); // 修改或增加属性
div.removeAttribute("index"); // 删除属性

h5自定义属性

自定义属性，程序员定义的属性，自定义属性data-开头并且赋值
element.dataset ,获取所有data开头的属性通过对象的方式存放
element.dataset.index 或者 element.dataset[‘index’]，获取具体的属性值

<div data-list-name = 'luokong' data-index = '6'></div>

console.log(div.dataset)
console.log(div.dataset['index']);
console.log(div.dataset.listName); // 多个-采用驼峰命名法

节点属性

网页中所有内容都为节点(node)，利用节点层次关系获取节点
nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)

var div = document.querySelector("div");
console.log(div.nodeType) // 1 

元素节点 nodeType 为1，属性节点 nodeType 为2，文本节点 nodeType 为3 (文本节点包括文字、空格、换行等)

父级节点

方法	说明
node.parentNode	上一级父级节点找不到就返回 null

<div>
	<h4>这是一段内容</h4>
</div>
<script type="text/javascript">
var h4 = document.querySelector("h4");
console.log(h4.parentElement); // 输出的是h4的父节点div
</script>

子级节点

方法	说明
parentNode.childNodes	集合返回所有的子节点 包含 元素节点 文本节点
parentNode.children	集合获取所有的子节点元素
parentNode.firstChild	返回第一个子节点 不管文本节点还是元素节点
parentNode.lastChild	返回最后一个子节点
parentNode.firstElementChild	返回第一个子元素的节点
parentNode.lastElementChild	返回最后一个子元素的节点

<ul>
	<li>这是第1个li标签</li>
	<li>这是第2个li标签</li>
	<li>这是最后一个li标签</li>
</ul>
<script type="text/javascript">
	var ul = document.querySelector("ul");
	console.log(ul.childNodes); // 获取所有的子节点 7 包括文本节点
	console.log(ul.children); // 获取所有的子节点元素 3个li
	console.log(ul.firstChild); // 获取第一个子节点 文本节点
	console.log(ul.firstElementChild); // 获取第一个子节点元素 li ul.children[0]
	console.log(ul.lastChild); // 获取最后一个子节点 文本节点 
	console.log(ul.lastElementChild); // 获取最后一个子节点元素 li ul.children[ul.children.length - 1]
</script>

兄弟节点

方法	说明
node.nextSibling	集合返回下面的兄弟节点 包含 元素节点 或 文本节点等
node.previousSibling	集合返回上面的兄弟节点 包含 元素节点 或 文本节点等
node.nextElementSibling	返回下一个兄弟元素的节点
node.previousElementSibling	返回上一个兄弟元素的节点

<div class="box1">这是第一个盒子</div>
<div class="box2">这是第二个盒子</div>
<div class="box3">这是第三个盒子</div>
<script type="text/javascript">
	var box2 = document.querySelector(".box2"); // 获取第二个盒子的元素节点
	console.log(box2.nextSibling); // 下一个兄弟节点 包括文本节点 text
	console.log(box2.nextElementSibling); // 下一个兄弟节点元素 box3
	console.log(box2.previousSibling); // 上一个兄弟节点 包括文本节点 text
	console.log(box2.previousElementSibling); // // 上一个兄弟节点元素 box1
</script>

节点操作

方法	说明
document.createElement(‘HTML元素’)	创建节点
node.appendChild(child)	将一个节点添加到指定父节点的子节点列表中的末尾上
node.insertBefore(child,指定元素)	将一个节点添加到指定父节点的子节点列表中的前面指定元素：ul.children[0]
node.removeChild(child)	删除第一个子节点，返回删除的节点
node.cloneNode()	括号内为空或false为浅拷贝，复制标签不复制内容，true 内容和标签
node.before()	将节点添加在兄弟节点的前面
node.after()	将节点添加在兄弟节点的后面

<ul>
	<li>这是第一个li</li>
	<li>这是第二个li</li>
</ul>
<script type="text/javascript">
	var ul = document.querySelector("ul"); // 获取元素
	var li1 = document.createElement("li"); // 创建li标签
	var li2 = document.createElement("li"); 
	li1.innerHTML = '在末尾添加li'; // 添加li的内容
	li2.innerHTML = '在指定位置添加li'; 
	ul.appendChild(li1); // 将新增li添加到末尾
	ul.insertBefore(li2,ul.children[0]) // 在指定位置添加
	console.log(ul.removeChild(ul.children[1]))  // 移除指定位置的元素
	ul1 = ul.cloneNode(); // 浅拷贝 不包括内容
	ul2 = ul.cloneNode(true); // 深拷贝 包括内容
	ul.before(ul1) // 在ul的前面添加
	ul.after(ul2); // 在ul的后面添加
</script>

事件

事件类型

事件	触发条件
onclick	点击事件
onmousemove	鼠标移动时触发
onmouseover	鼠标移动到某元素上
onmouseout	鼠标移开时触发
onmouseenter	鼠标指针移入触发
onmouseleave	鼠标指针移出触发
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onfocus	获取焦点
onblur	失去焦点
onchange	元素失去焦点且内容发生改变时触发
onkeyup	键盘按键松开时触发（不区分大小写）
onkeydown	键盘按键按下时触发（不区分大小写）
onkeypress	键盘按键按下时触发，不识别功能建（区分大小写）

事件处理程序

传统注册：事件源.事件类型 = 事件处理程序（唯一性，最后注册的函数会覆盖掉前面的）

var btn = document.querySelector('button'); // 事件源
btn.onclick = function(){ // onclick 事件类型
	alert('触发响应的函数') // 事件处理函数
}

方法监听注册：eventTarget.addEventlistener(type, listener[, useCapture])(同一事件可以添加多个监听器）

btn.addEventListener("click",function(false){ // type：事件类型字符串，比如click，不带on
    // useCapture：事件流默认false，true：捕获阶段。false：冒泡阶段。
    alert("666") // listener：事件处理函数，事件发生时监听函数
})

删除事件

传统注册：eventTarget.onclick = null;

var btn = document.querySelector('button'); // 事件源
btn.onclick = function(){ // onclick 事件类型
	alert('触发响应的函数') // 事件处理函数
    btn.onclick = null; // 解绑事件
}

方法监听注册：eventTarget.removeEventListener(‘type’, 函数名)

btn.addEventListener("click", fn);
function fn(){ 
    alert("666")    
	btn.removeEventListener("click",fn) // 解绑事件
}

事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
捕获阶段 ——> 目标阶段 ——> 冒泡阶段

<div class="father">
	<div class="son">son盒子</div>
</div>

捕获阶段：Document —>html—>body—>div

// 捕获：点击son时会弹出father 在 弹出son
var son = document.querySelector('.son'); 
son.addEventListener("click",function(){
	alert("son"); 
},true) // true 捕获阶段
var fat = document.querySelector('.father');
fat.addEventListener("click",function(){
	alert("father");
},true)

冒泡阶段：div—>body—>html—>Document

// 冒泡：点击son时 弹出son 在 弹出father
var son = document.querySelector('.son'); 
son.addEventListener("click",function(){
	alert("son");
})
var fat = document.querySelector('.father');
fat.addEventListener("click",function(){
	alert("father");
})

事件对象

（event）就是一个事件对象 写到监听函数的小括号里，有事件时才有对象，一系列对象相关的集合，可以自己命名e

方法	说明
this	返回是绑定事件的对象
e.target	返回的是触发事件的对象（元素）
e.scrElement	返回的是触发事件的对象*
e.currentTarget	相当于this
e.type	返回事件类型，比如click 不带on

<ul>
	<li>这是第1个li</li>
	<li>这是第2个li</li>
    <li>这是第3个li</li>
	<li>这是第4个li</li>
</ul>

var ul = document.querySelector('ul');
ul.addEventListener("click",function(e){
    console.log(e); // 事件对象
    console.log(e.target) // 返回的是触发事件的对象
    console.log(this) // 返回的是ul
    console.log(e.srcElement); // 返回的是触发事件的对象*
	console.log(e.currentTarget); // 返回的是绑定事件的对象
	console.log(e.type) // 返回事件类型，比如click 不带on
})

阻止行为冒泡

方法	说明
e.preventDefault()	阻止默认行为 不让链接跳转等 标准
e.returnValue	阻止默认行为（属性）* ie 678使用
return false	阻止默认行为，后面代码将不执行
e.stopPropagation()	阻止冒泡（方法）标准
e.cancelBubble	阻止冒泡（属性）* ie 678使用

<!-- 阻止默认行为 -->
<a href="index.html">这是一个超链接</a>
<script type="text/javascript">
var a = document.querySelector('a');
a.addEventListener("click",function(e){
	e.preventDefault(); // 默认行为 阻止a链接跳转
})
</script>

<!-- 阻止冒泡 -->
<div class="father">
	<div class="son">son盒子</div>
</div>
<script type="text/javascript">
// 冒泡：点击son时 弹出son 在 弹出father
var son = document.querySelector('.son'); 
son.addEventListener("click",function(e){
	alert("son");
	e.stopPropagation(); // 阻止冒泡 不在弹出father
})
var fat = document.querySelector('.father');
fat.addEventListener("click",function(){
	alert("father");
})
</script>

事件委托

不给每个子节点设置监听器，给父节点设置监听器，利用冒泡原理

<ul>
	<li>这是第1个li</li>
	<li>这是第2个li</li>
	<li>这是第3个li</li>
	<li>这是第4个li</li>
</ul>
<script type="text/javascript">
	// 给多个li添加统一的事件
var ul = document.querySelector('ul');
ul.addEventListener("click",function(e){
	alert("事件委托"); 
	e.target.style.backgroundColor = 'pink'; // 通过target改变具体的样式
})
</script>

document.addEventListener('contextmenu',function(e){ 
	e.preventDefault(); // 禁止右键菜单
})

document.addEventListener('selectstart',function(e){
	e.preventDefault(); // 禁止选中文字
})	

鼠标事件对象

方法	说明
e.clientX	返回鼠标相当于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相当于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面X轴坐标
e.pageY	返回鼠标相对于文档页面Y轴坐标
e.screenX	返回鼠标相当于电脑屏幕的X坐标
e.screenY	返回鼠标相当于电脑屏幕的Y坐标
e.keyCode	返回该建的ASCII码的值

document.addEventListener("click",function(e){
	// 相对于浏览器窗口的坐标
	console.log(e.clientX)
	console.log(e.clientY)
	// 相对于页面文档的坐标
	console.log(e.pageX)
	console.log(e.pageY)
	// 相对于电脑屏幕的坐标
	console.log(e.screenX)
	console.log(e.screenY)
})

document.addEventListener("keyup",function(e){
	console.log(e.keyCode); // 键盘弹起的ASCII码值
})