常见DOM操作
文章目录
- 概述
- DOM常用操作
- 事件
- this的用法
- 创建节点
- 删除节点
概述
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),对于任何一个html网页都可以将页面中所有内容当做一颗倒置的文档树理解，可以通过js的dom操作对树中任意节点进行访问（添加，删除，修改，检索）
DOM常用操作
1. 获取文档中的所有元素
var all = document.all; // 返回一个包含了文档中所有节点的数组对象2. 根据标签获取元素
//获取页面中的所有h1元素 (返回数组对象) let titles = document.getElementsByTagName("h1"); console.log(titles);3. 根据元素的class名称获取元素（存在兼容性问题，慎用）
//返回所有class名称为row的元素(返回数组对象) let rows = document.getElementsByClassName("row"); console.log(rows);4. 根据元素的name属性获取元素集合（一般只有表单元素才有name属性）
let langs = document.getElementsByName("lang"); //返回数组- 根据元素的id获取元素(因为id在页面中具备唯一性，因此以下代码只能获取一个元素)
let selectAll = document.getElementById("selectAll");//返回单个元素对象以上都是一些比较常规的获取dom的方式，另外javascript还提供了两种更为全面的获取dom对象的方式：
document.querySelector()：根据css的选择器获取匹配的单个元素
document.querySelectAll()：根据提供的css选择器获取匹配的多个元素
//根据css的选择器获取指定选择器选中的单个元素 var h2 = document.querySelector("h2"); console.log(h2); var tds = document.querySelectorAll("td"); console.log(tds); //获取所有class="row" h1 h2元素？ var elements = document.querySelectorAll(".row,h1,h2"); console.log(elements);元素上的属性
元素上的属性，比如id,value 可以通过 . 直接访问如果是自定义属性，那么可以通过如下两种方式来获取getAttribute("test")attributes["test"].nodeValue样式
一个元素节点的style属性即对应的css通过给元素的style.backgroundColor 赋值，修改样式style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同的事件
焦点事件
焦点相关的事件，分别有获取焦点和失去焦点 当组件获取焦点的时候，会触发onfocus事件 当组件失去焦点的时候，会触发onblur事件 <input type="text" onfocus="函数名()" onblur="函数名()" id="input1" placeHolder="输入框" >鼠标事件
鼠标事件，由鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成 当在组件上鼠标按下的时候，会触发onmousedown事件 当在组件上鼠标弹起的时候，会触发onmouseup事件 当在组件上鼠标经过的时候，会触发onmousemove事件 当在组件上鼠标进入的时候，会触发onmouseover事件 当在组件上鼠标退出的时候，会触发onmouseout事件 注: 当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发， 区别在于无论鼠标在组件上如何移动， onmouseover只会触发一次，onmousemove每次移动都会触发键盘事件
键盘事件，由键盘按下keydown，键盘按下keypress,键盘弹起几个事件组成 当在组件上键盘按下的时候，会触发onkeydown事件 当在组件上键盘按下的时候，也会触发onkeypress事件 当在组件上键盘弹起的时候，会触发onkeyup事件 注: 都是用于表示键盘按下，onkeydown和onkeypress的区别在什么呢？ onkeydown 可以获取所有键，除了打印键Prts 可以获取用户是否点击了修饰键 (ctrl,shift,alt) 不能判断输入的是大写还是小写 onkeypress 只能获取字符键 不能获取用户是否点击了修饰键 (ctrl,shift,alt) 可以判断输入的是大写还是小写点击事件
点击事件，由单击，双击按两个事件组成当在组件上单击的时候，会触发onclick事件当在组件上双击的时候，会触发ondblclick事件变化事件
当组件的值发生变化的时候，会触发onchange事件 注：对于输入框而言，只有在失去焦点的时候，才会触发onchange<input type="text" id="t1" onchange="change()" >提交事件
可以在form元素上，监听提交事件当form元素提交的时候，会触发onsubmit事件<form action="路径" onsubmit="login()"></form>this的用法
this表示触发事件的组件，可以在调用函数的时候，作为参数传进去 <input type="button" onclick="singleClick(this)" value=""> function singleClick(button){ //这个this就是 button本身 }父节点关系
parentNode同胞节点关系
分别通过 previousSibling和nextSibling属性获取前一个，以及后一个同胞节点 注意：不是紧挨着情况 标签之间有任何字符、空白、换行都会产生文本元素。 所以获取到的节点是#text.子节点关系
子节点关系有: firstChild 第一个子节点 lastChild 最后一个子节点 childNodes 所有子节点 注:firstChild 如果父节点的开始标签和第一个元素的开始标签之间有文本、空格、换行，那么firstChild第一个子节点将会是文本节点，不会是第一个元素节点 childNodes和children的区别
childNodes和children都可以获取一个元素节点的子节点。 childNodes 会包含文本节点 children 会排除文本节点 创建节点
创建元素节点
通过createElement 创建一个新的元素节点 接着把该元素节点，通过appendChild加入到另一个元素节点div中 var hr=document.createElement("hr"); var d1 = document.querySelector("#d1"); d1.appendChild(hr);创建文本节点
首先创建一个元素节点p段落标签 接着通过createTextNode创建一个内容节点text 把text加入到p 再把p加入到div var p=document.createElement("p"); var text = document.createTextNode("这是通过DOM创建出来的<p>"); p.appendChild(text); var d1 = document.querySelector("#d1"); d1.appendChild(p);创建属性节点
首先创建一个元素节点a 接着创建一个内容节点content 把content加入到a 然后通过createAttribute创建一个属性节点 href 设置href的值为http://www.baidu.com 通过setAttributeNode把该属性设置到元素节点a上 最后把a加入到div var a=document.createElement("a"); var content = document.createTextNode("百度"); a.appendChild(content); var href = document.createAttribute("href"); href.nodeValue="http://www.baidu.com"; a.setAttributeNode(href); var d1 = document.querySelector("#d1"); d1.appendChild(a);删除节点
删除元素节点
要删除某个元素节点有两步 第一：先获取该元素的父节点 第二：通过父节点，调用removeChild 删除该节点 var parentDiv = document.querySelector("#parentDiv"); var delElement= document.querySelector("#要删除的元素ID"); parentDiv.removeChild(delElement);删除属性节点
要删除某个属性节点有两步 第一：先获取该元素节点 第二：元素节点，调用removeAttribute删除指定属性节点var tag= document.querySelector("#id");tag.removeAttribute("属性名");删除文本节点
var tag= document.querySelector("#id"); tag.innerHTML="";替换节点
与删除节点一样，替换节点也需要先获取父节点，然后通过父节点替换子节点。 1. 获取父节点 2. 创建子节点 3. 获取被替换子节点 4. 通过replaceChild进行替换 注: replaceChild 第一个参数是保留的节点，第二个参数是被替换的节点 var newDiv= document.createElement("div"); var text = document.createTextNode("替换后的文本"); newDiv.appendChild(text); var replaceElement= document.querySelector("#被替换的元素的ID"); var parentDiv = document.querySelector("#parentDiv"); parentDiv.replaceChild(newDiv,replaceElement);innerHTML和innerText区别？
- innerHTML可获取或设置指定元素标签内的html内容，从该元素标签的起始位置到终止位置的全部内容（包含html标签）。- document.getElementById('box').innerHTML='<h1>hello</h1>';- innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容（不包含html标签）- document.getElementById('box').innerText='<h1>hello</h1>';以上两种情况结果分别为：
innerHTML：
innerText：
追加节点
通过appendChild追加节点。 追加节点一定是把新的节点插在最后面 1. 创建新节点 2. 获取父节点 3. 通过appendChild追加在前方插入
有时候，需要在指定位置插入节点，而不是只是追加在后面。 这个时候就需要用到insertBefore 1. 创建新节点 2. 获取父节点 3. 获取需要加入的子节点 4. 通过insertBefore插入 注: insertBefore的第一个参数是新元素，第二个参数是插入位置 parentDiv.insertBefore(新元素,插入位置); 赞 (0)