DOM笔记

DOM 是Document Object Model( 文档对象模型 )的缩写。

节点概念

DOM把所有的html都转换为节点
整个文档 是一个节点
元素是节点
元素属性 是节点
元素内容 是节点
注释也是节点

下面展示获取各个节点

document.write("<div id=\"d1\">hello HTML DOM</div> <!-- 这是注释 -->");

var  div1 = document.getElementById("d1");
console.log("文档节点"+document); //返回 文档节点[object HTMLDocument]
console.log("元素"+div1); //返回 元素[object HTMLDivElement]
console.log("属性节点"+div1.attributes[0]); //返回 属性节点[object Attr]
console.log("内容节点"+div1.childNodes[0]); //返回 内容节点[object Text]
console.log("注释节点"+document.body.childNodes[2]); //返回 注释节点[object Comment]

获取节点

获取元素节点：document.getElementById()

根据ID获取某个元素

//<div id="d1">hello HTML DOM</div>
var div1 = document.getElementById("d1");

获取元素节点：document.querySelector()

通过选择器获取某个元素
获取元素节点：document.querySelectorAll()

通过选择器获取符合选择器的元素数组 此函数返回的是静态的集合，.children返回的是动态集合

获取元素节点：document.getElementsByTagName()

根据标签名获取标签名元素数组

/*
<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
*/
var divs = document.getElementsByTagNmae("div");
divs[0];
divs[1];
divs[2];

获取元素节点：document.getElementsByClassName()

根据Class名获取Class名元素数组

/*
<h1  class="hd" >hello javascript</h1>
<h2  class="hd" >hello BOM</h2>
<div  class="hd" >hello DOM</div>
*/
var hds = document.getElementsByClassName("hd");
hds[0];
hds[1];
hds[2];

获取元素节点：document.getElementByName()

通过name名获取某个元素

获取和修改属性节点：.attributes / .className / .getAttribute() / .setAttribute(,)

需先获取元素节点，然后执行div.attributes获取属性节点

// <div id="d1" align="center" class="abc d" test="a">hello HTML DOM</div>
var div = getElementById("d1");
var attr = div.attributes;
for(var i = 0;i<attr.length;i++){
    console.log(attr[i].nodeName + "：" + attr[i].nodeValue); 
    //输出节点属性：节点值 id:d1 align:center class:abc d test:a
}

console.log(attr.className);//返回 abc d

console.log(attr["id"].nodeValue); //可用过括号方式取值
console.log(attr.getAttribute("test"));//这两种方式可获取自定义属性
//修改自定义属性同样如此
attr["test"].nodeValue = "bb";
attr.setAttribute("test","bb");

获取和修改内容节点：.childNodes / .innerHTML、.innerText

需先获取元素节点，然后执行div.childNodes获取内容节点

//<div id="d1" align="center" class="abc">hello HTML DOM</div>
var content = document.getElementById("d1").childNodes;
console.log(content[0].nodeName + ":" + content[0].nodeValue); //返回 #text：hello HTML DOM

修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML/innerText进行。效果是一样的。

//<div id="d1">hello HTML DOM</div>
document.getElementById("d1").childNodes[0].nodeValue = "通过childNode[0].value改变内容";
document,getElementById("d1").innerHTML = "通过innerHTML改变内容";
document,getElementById("d1").innerText = "通过innerText改变内容";  //innerHTML是可以设置标签语句的，innerText则是设置纯文本

PS：若获取不要存在的元素，考虑是否是元素没创建前 JS先行执行了。

节点属性

节点类型	nodeType	nodeName	nodeValue
元素节点	1	标签名（大写）	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容
CDTAT节点	4	#cdata-section	CDATA区域的内容
实体引用名称节点	5	引用名称	null
实体名称节点	6	实体名称	null
处理指令节点	7	target	entire content cluding the target
注释节点	8	#comment	注释内容
文档节点	9	#document	null
文档类型节点	10	doctype的名称	null
文档片段节点	11	#document-fragment	null
DTD声明节点	12	符号名称	null

PS：在以上的节点分类中，nodeType为4、5、6、7、12的四种节点，是针对XML文档而言的。

元素样式

//<div id="d1" style="background-color:pink">Hello HTML DOM</div>
var d1 = document.getElementById("d1");
d1.style.backgroundColor="green";  //这种方法只能获取行内样式

//获取元素全部样式：window.getComputedStyle()
var d1 = document.getElementById("d1");
window.getComputedStyle(d1,null)["backgroundColor"]; //获取元素计算后的样式

DOM事件

获取事件对象

//<div id="#d"></div>
var div1 = document.getElementById("d");
div1.onblurs = function(e){
    e = e || window.event;  //获取事件对象
    // 在鼠标事件中，常用的就是获取鼠标的位置信息（参考物不同）
    // e.clientX与e.clientY：鼠标相对于可视区左上角的水平位置和垂直位置。
    // e.pageX与e.pageY：鼠标相对于网页（文档document）左上角的水平位置与垂直位置（推荐使用）
    // e.screenX与e.screenY：鼠标相对于屏幕左上角的水平位置与垂直位置。
    //e.KeyCode 键盘码
}

绑定事件

//方法1：onfocus="abc()"
//<div id="#d" onfocus="abc()"></div>
abc(){
    console.log("触发事件");
}

//方法2：div1.onblurs
//<div id="#d"></div>
var div1 = document.getElementById("d");
div1.onblurs = function(){
    console.log("触发事件");
}
div1.onblurs = null; //删除事件

//方法3：document.addEventListener(event,function,useCapture)
//参数三为是否在捕获阶段触发的意思（事件的三个阶段：事件捕获[从外到里]—事件冒泡[从里到外]）。如果需要阻止事件传播则需要加绑定事件函数中写：e.stopPropagation();
//<div id="#d"></div>
var div1 = document.getElementById("d");
div1.addEventListener("click",fn);
function fn(){
    console.log("此方法可添加绑定事件，而.on事件赋值则会覆盖原事件");
}
div1.removeEventListener("click",fn);  //删除事件

焦点事件
1. onfocus 获取焦点事件
2. onblurs 失去焦点事件
鼠标事件
1. onmousedown 鼠标按下事件
2. onmouseup 鼠标弹起事件
3. onmousemove 鼠标经过事件
4. onmouseover 鼠标进入事件
5. onmouseout 鼠标离开事件
PS：当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发，区别在于无论鼠标在组件上如何移动，onmouseover只会触发一次，onmousemove每次移动都会触发
1. onclick 鼠标单击事件
2. ondbclick 鼠标双击事件
键盘时间
1. onkeydown 键盘按下事件
  
  可以获取所有键，除了打印键Prts
  可以获取用户是否点击了修饰键 (ctrl,shift,alt)
  不能判断输入的是大写还是小写
2. onkeypress 键盘按下事件
  
  只能获取字符键
  不能获取用户是否点击了修饰键 (ctrl,shift,alt)
  可以判断输入的是大写还是小写
3. onkeyup 键盘弹起事件
内容改变事件

onchange 在用户改变输入域内容时执行指定函数（需要内容改变且失去焦点触发）
提交事件

onsubmit 一般用于form表单提交时触发

若 onsubmit = "return a()",a函数如果返回false则不触发表单提交
window事件

window.onload 页面加载完成时会触发指定函数
window.onscroll 页面滚动会触发指定函数
window.onresize 页面改变大小会触发指定函数

this当函数参数

/*<input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" onclick="singleClick(this)" value="演示this的按钮2" >*/
function singleClick(button){
console.log("被点击的按钮上的文本是: "+button.value);
}

节点关系
1. .parentNode 父节点
2. .previousSibling 前一个节点
3. .nextSibling 下一个节点
4. .firstChild 第一个子节点
5. .lastChild 最后一个子节点
6. .childNodes 所有子节点数组（包含文本节点注释节点等）
7. .children 所有子节点数组且会动态更新个数（不包含文本节点注释节点等）
创建、插入、追加、删除、替换节点
- 创建节点
  1. document.createElement() 创建元素节点
  2. document.createTextNode() 创建文本节点
  3. document.createAttribute() 创建属性节点
- 插入、添加节点
  1. .appendChild() 添加节点
  2. .insertBefore(,) 插入节点
    
    PS：父节点.insertBefore(前一个子节点,后一个子节点)
  3. .setAttributeNode() 添加属性节点
- 删除、替换节点
  1. .removeChild() 删除子节点
    
    如果删除文本节点一般用.innerHTML = "";是一样的效果
  2. .removeAttribute() 删除属性
  3. .replaceChild(,) 替换节点
    
    PS：父节点.replaceChild(替换的节点,被替换的节点);
- 克隆节点
  
  .cloneNode()
  
  参数：
  1. ture 深拷贝，拷贝元素及元素中的内容
  2. false 浅拷贝，只拷贝元素本身

posted @ 2021-03-05 11:35 镜像山海阅读(102) 评论(0) 收藏举报

刷新页面返回顶部

镜像山海