原生js 之 (DOM操作） |
您所在的位置：网站首页 › jsdom是什么意思啊 › 原生js 之 (DOM操作） |
原生js 之 (DOM操作）
|
Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) JavaScipt由三部分构成 ECMAScript、DOM和BOM。 BOM浏览器对象模型，提供了与浏览器的交互方法和接口； DOM 文档对象模型，提供了处理网页内容、结构 、样式的方法和接口； DOMDOM文档对象模型 又称为DOM树 DOM树 由文档、元素、节点 组成 都以 document . 开头 例如：document.getElementById 使用 console.dir 可以打印出返回的元素对象，从而更好的查看属性和方法 getElementById （元素ID)获取标签为Id的元素 (文档中的id值是唯一的，没有重复的id) 参数：id值，区分大小写的字符串 返回id属性值的元素节点相对应的对象 2019-9-9 // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 var timer = document.getElementById('time'); console.log(timer); console.log(typeof timer); // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer); getElementsByTagName (标签名)注意：得到的是一个对象数组 ，如需操作元素则需要遍历伪数组 并且伪数组不能使用数组的方法 以标签名来获取元素 参数：标签名 返回的是一个对象数组 （伪数组） 生僻字 生僻字 生僻字 生僻字 生僻字 // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的 var lis = document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]); // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } // 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签 var nav = document.getElementById('nav'); // 这个获得nav 元素 var navLis = nav.getElementsByTagName('li'); console.log(navLis);注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。 getElementsByCalssName (class类名)以class类名获取元素 参数 calss类名 返回 对应类名的元素对象集合 盒子1 盒子2 首页 产品 //getElementsByClassName根据类名获得某些元素集合 var boxs=document.getElementsByClassName("box") console.log(boxs) querySelector （选择器 ）可以是任意的选择器 例如：id、标签名、类名 参数: 可以是 id 、类名、标签 选择器 返回：该模式匹配的第一个元素 注意 : 需要在选择器前加符号 例如 .box 、 #nav。让querySelector 知道是什么选择器所以要加符号。 与前面介绍的不同 { alert("移除div事件") }) 删除事件（解绑事件） 移除传统的注册方式（DOM 对象的方法） div.onclick=null; 移除监听事件的方式 （使用匿名函数 ，无法移除 ） div.removeEventListener (type,listener,useCapture); 1 2 3 var divs = document.querySelectorAll('div'); divs[0].onclick = function() { alert(11); // 1. 传统方式删除事件 divs[0].onclick = null; } // 2. removeEventListener 删除事件 divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号 function fn() { alert(22); divs[1].removeEventListener('click', fn); } 鼠标事件 鼠标事件的执行顺序 mousedown->mouseup->click->mousedown->mouseup->click->dbclick 鼠标事件描述click鼠标点击左键并释放时触发dbclick双击鼠标左键时触发mousedown按下鼠标按键时触发mouseup释放鼠标按键时触发mouseover当鼠标经过时触发 具有事件冒泡mouseout当鼠标离开时触发 具有事件冒泡mouseenter当鼠标经过时触发 不具有事件冒泡mouseleave当鼠标经过时触发 不具有事件冒泡mousemove当移动鼠标时触发contextmenu禁止鼠标右键菜单selectstart禁止鼠标选中文字只有在同一个元素上相继触发 mouseover 和 mouseup事件 才会触发click事件 只有触发再两次click事件,才会触发一次dbclick事件 mouseenter与mouseove的区别 mouseenter经常与mouseleave搭配使用 //1.mouseenter 鼠标经过 不具有事件冒泡，不会传递给son点击事件 var father = document.querySelector('.father'); var son = document.querySelector('.son'); father.addEventListener('mouseenter', function() { console.log(11); })禁止鼠标右键菜单 //1.contextmenu 禁止鼠标右键菜单 documnet.addEventListener("contextmenu",function(e){ e.preventDefault(); // 阻止事件的默认跳转行为 })禁止鼠标选中文字 //2.selectstart 禁止鼠标选中文字 documnet.addEventListener("selectstart",function(e){ e.preventDefault(); //阻止事件的默认跳转行为 }) 焦点事件 mous焦点事件描述blur元素失去焦点时触发,不会冒泡focus元素获得焦点时触发,不会冒泡 键盘事件一般键盘事件使用在 输入框的标签中 当按下字符键的执行顺序 (按下字符键 触发三次事件) keydown->keypress->keyup 其中 keydown和keypress在文件框发生变化之前触发,然后是keyup事件则是在文件框发生变化之后触发 当按下非字符键的执行顺序 (按下非字符, 触发二次事件) keydown->keyup 其中首先触发 keydown,最后触发keyup. 注意：keydown和keypress在文本框里面特点：先执行事件的处理程序 在将文字落入到文本框中 keyup在文本框里面的特点：先将文字落入到文本框中在执行事件的处理程序 keypress不识别功能键，但是keyCode属性能区分大小写,返回不同的ASCII值 onkeydown和onkeyup,不区分字母大小写，onkeypress区分字母大小字 键盘事件描述keydown按下键盘上的任意键触发;按住不放,重复触发keypress按下键盘上的字符键触发;按住不放,重复触发,不识别功能键，如 箭头,ctrl,shift 等keyup释放键盘上的键时触发e.keyCode当用户按下按键时获取按键 ASCII 编码e.key获取当用户按下按键时的 名称 // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keypress', function() { console.log('我按下了press'); }) //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keydown', function() { console.log('我按下了down'); }) // 4. 三个事件的执行顺序 keydown -- keypress -- keyup // 5.利用Keycode返回的ASCII码值来判断用户按下的是哪个键 document.addEventListener("keyup",function(e){ if(e.keyCode===65){ alert("你按下的是a键") }else{ alert("你没有按下a键") } }) 滚动条事件当出现滚动条时，向下滚动页面时，上面被隐藏掉的高度，被称为页面被卷去的部分，此时滚动条在滚动时会触发 scroll事件 element.addEventListener("scroll",()=>{ console.log(element.scrollTop) }) 表单事件change事件 当表单的值 发生改变时触发 在触发DOM上的某个事件时会产生一个事件对象event ，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。 事件触发时系统会产生一个事件对象，并且系统会以实参的形式传给事件处理函数 在事件处理程序中声明一个形参用来接收事件参数。 //1. 方法一 eventTarget.onclick=function(event){ //这个event就是事件对象，我们还喜欢的写成 e 或者 evt } // 2. 方法二 eventTarget.addEventListener("click",function(event){ //这个event就是事件对象，我们还喜欢的写成 e 或者 evt/这个 }) //3.方法三 eventTarget.addEventListener("click",fn) function(event){ //这个event就是事件对象，我们喜欢写成e或者evt } 事件对象的属性和方法 事件对象的属性和方法说明e.target返回 触发 事件的对象 标准e.srcElement返回触发事件的对象 非标准 ie6-8e.type返回事件的类型 比如 click mouseover 不带 one.canceIBubble该属性阻止冒泡 非标准 ie6-8使用e.returnValue该属性 阻止默认事件（默认行为）非标准 ie6-8使用 比如不让链接跳转e.preventDefault()该方法阻止默认事件（默认行为）标准 比如不让链接跳转e.stopPropagation()标准的阻止事件冒泡 事件对象的 this与e.target的区别this 指向的是事件绑定的元素 e.target 指向的是事件触发元素 别忘了e. 通常情况下e.target 和 this 的指向是一致的 但是有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行） 这时候 this 指向的是元素，因为this使终指向的是事件绑定的元素 target 指向的是子元素 ，因为target使终指向的是事件触发的元素 123 abc abc abc 1. //target和this指向的一致 var div = document.querySelector('div'); div.addEventListener('click', function(e) { // e.target 和 this指向的都是div console.log(e.target); console.log(this); }); 2. //在冒泡的情况下 target和this指向不同 var ul=document.querySelector("ul") ul.addEventListener("click"，function(){ // 我们给ul 绑定了事件 那么this 就指向ul console.log(this); // ul // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li console.log(e.target); // li }) 鼠标的事件对象 鼠标事件对象说明e.clientX返回鼠标相对于浏览器窗口可视区的 X 坐标e.clientY返回鼠标相对于浏览器窗口可视区的 Y 坐标e.pageX返回鼠标相对于文档页面的 X 坐标 IE9+ 支持e.pageY返回鼠标相对于文档页面的 Y 坐标 IE9+ 支持e.screenX返回鼠标相对于电脑屏幕的 X 坐标e.screenY返回鼠标相对于电脑屏幕的Y 坐标 // 鼠标事件对象 MouseEvent document.addEventListener('click', function(e) { // 1. client 鼠标在可视区的x和y坐标 console.log(e.clientX); console.log(e.clientY); console.log('---------------------'); // 2. page 鼠标在页面文档的x和y坐标 console.log(e.pageX); console.log(e.pageY); console.log('---------------------'); // 3. screen 鼠标在电脑屏幕的x和y坐标 console.log(e.screenX); console.log(e.screenY); }) 操作元素 修改元素内容个人推荐: innerHTML 使用多 Element.innerText 只显示纯文本,去除html标签,同时去除了空格和换行 Element.innerHTML 显示指定的元素的全部内容,包括HTML标签,同时保留空格和换行 innerText与innerHTML的区别 使用innerText获取内容 不识别 HTML标签, 空格与换行 使用innerText设置内容 不识别 HTML标签 使用innerHTML获取内容 识别 全部内容包括 HTML标签 ,会保留空格和换行 使用innerHTML设置内容 识别 可设置HTML标签 显示当前系统时间 某个时间 1123 // 当我们点击了按钮， div里面的文字会发生变化 // 1. 获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); // 2.注册事件 btn.onclick = function() { // div.innerText = '2021-6-18'; div.innerHTML = getDate(); } function getDate() { var date = new Date(); // 我们写一个 2019年 5月 1日 星期三 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]; } 属性的操作this 指向的是事件函数的调用者 普通元素的属性操作获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名=值 按钮 // 1. 获取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); // 2. 注册事件 处理程序 btn.onclick = function() { // 表单里面的值 文字内容是通过 value 来修改的 input.value = '被点击了'; // 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用 // btn.disabled = true; this.disabled = true; // this 指向的是事件函数的调用者 btn } 样式属性操作通过 js 修改元素大小,颜色,位置等模式 常用方式 Element.style.样式=值 //行内样式操作 修改行内样式 权重较高 Element.className=“类名” //类名样式操作 覆盖原先的类名 Element.className=“ ” //值为空或null 可使元素的类名置空Element.classList.add (“类名”) // 添加类名操作 可添加多个 不会覆盖原有的类名 Element.classList.remove( “ 移除类名”) // 移除类名操作 可移除多个类名 Element.classList.toggle( “切换类名 ”) //切换类名 无则添加，有则移除 Element.calssList.contains( “类名” ) //是否包含此类名， 返回布尔值判断是否为存在 calssName是保留字,因此使用calssName来操作元素类名属性 // 1. 获取元素 var div = document.querySelector('div'); // 2. 注册事件 处理程序 div.onclick = function() { // div.style里面的属性 采取驼峰命名法 js中对大小写敏感 this.style.backgroundColor = 'purple'; //别忘了加 单位 px this.style.width = '250px'; // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器 // this.className = 'change'; this.className = 'first change'; } 取消 a 标签的默认跳转方法一: 在处理程序内的最后 添加 return false ; 方法二: 在 a标签中加 javascript:; //方法一: 事件处理程序中最后设置 return false; 点击 //方式2：设置a标签的href属性值为：javascript: 点击2 var link = document.getElementById('link'); link.onclick = function(){ alert('你好'); // 方式1：取消a点击后的默认跳转行为 return false; return false; }; //方式2：设置a标签的href属性值为：javascript:; 点击2 //备注： // 给a标签的herf值设置javascript: ,表示将来点击a时，会阻止默认跳转行为，并且仅仅会执行js代码 全选案例：全选为什么需要自定义属性：用于在页面中存储数据而不用在数据库中存储 获取属性值 Element.属性 （内置属性通 点的方式 获取元素属性） Element.getAttribute(“属性”) （一般用于 自定义属性）兼容性获取 var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); //(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console.log(div.getAttribute('id')); console.log(div.getAttribute('index')); 设置属性值 Element.属性= “值” （内置属性） Element.setAttribute( “属性”，”值“ )； //一般用于自定义属性 // 2. 设置元素属性值 // (1) element.属性= '值' div.id = 'test'; div.className = 'navs'; // (2) element.setAttribute('属性', '值'); 主要针对于自定义属性 div.setAttribute('index', 2); div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是 移除属性值 Element.removeAttribute(“属性”) // class 不是className // 3 移除属性 removeAttribute(属性) div.removeAttribute('index'); 获取H5自定义属性只能获取以 data开头 的自定义属性 Element.dataset.index 或者 Element.dataset[“index”] ie11才支持 使用 Element.dataset.属性 获得的是一个以 data- 开头的自定义属性集合 设置H5 自定义属性H5中规定 自定义属性要 以 data-开头做为属性名并且赋值。 在标签中设置 使用 js设置 Element.setAttribute(“data-index”,2) var div = document.querySelector('div'); // console.log(div.getTime); console.log(div.getAttribute('getTime')); div.setAttribute('data-time', 20); console.log(div.getAttribute('data-index')); console.log(div.getAttribute('data-list-name')); // h5新增的获取自定义属性的方法 它只能获取data-开头的 // dataset 是一个集合里面存放了所有以data开头的自定义属性 console.log(div.dataset); console.log(div.dataset.index); console.log(div.dataset['index']); // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法 console.log(div.dataset.listName); console.log(div.dataset['listName']); Tab栏 案例 ：tab栏node 表示父级 child 表示子级 创建节点 document.createElement(“标签”) 动态创建元素 创建之后需要添加 添加节点node.appendchild(child ) //node表示父级 child表示子级 将节点添加到node表示的父节点的子节点列表的末尾，类似数组的方法pushnode.insertBefore( child,指定节点的位置 ) 将节点添加到node表示的父节点的指定子节点的~前面，类似于css里面的before伪元素 123 // 1. 创建节点元素节点 var li = document.createElement('li'); // 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 var ul = document.querySelector('ul'); ul.appendChild(li); // 3. 添加节点 node.insertBefore(child, 指定元素); var lili = document.createElement('li'); ul.insertBefore(lili, ul.children[0]); // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素 删除节点node.removeChild( child ) 方法 在父级节点删除一个子节点，返回删除的节点 删除 熊大 熊二 光头强 // 1.获取元素 var ul = document.querySelector('ul'); var btn = document.querySelector('button'); // 2. 删除元素 node.removeChild(child) // ul.removeChild(ul.children[0]); // 3. 点击按钮依次删除里面的孩子 btn.onclick = function() { if (ul.children.length == 0) { this.disabled = true; } else { ul.removeChild(ul.children[0]); } } 复制（克隆）节点node.cloneNode() //返回调用 该方法的节点的一个副本，也称为克隆节点/拷贝节点 如果括号参数为空或者为 false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点 1111 2 3 var ul = document.querySelector('ul'); // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容 // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容 var lili = ul.children[0].cloneNode(true); ul.appendChild(lili); DOM的核心总结DOM操作，我们主要针对于元素的操作。主要有创建，添加，删除，改，查。 创建元素的三种方式 document.write() Element.innerHTML= 值 document.createElement()innerHTML数组方式（效率高） function fn() { var d1 = +new Date(); var array = []; for (var i = 0; i < 1000; i++) { //使用数组的方法push 在末尾添加标签 array.push(''); } document.body.innerHTML = array.join(''); var d2 = +new Date(); console.log(d2 - d1); } fn(); 添加 appendChild //在父节点的末尾添加节点 insertBefore //可以指定子节点的添加位置 删除 removeChild 改 主要修改DOM元素的属性，DOM元素的内容，属性，表单的值等。 修改元素属性: src、href、title等 修改元素的普通内容: innerHMTL、innerText 修改表单元素：value、type、disabled等 修改元素的模式，style、className 查 DOM提供的API：getElementById，getElementByTagName 古老用法不太推荐使用 H5提供的新方法：querySelector,querySelectorAll 提倡 利用节点操作获取元素：父（parentNode)、子(children)、兄弟（previousElementSibling、nextElementSibling) 提倡 操作自定义属性 主要操作自定义属性 setAttribute: 设置自定义属性 getAttribute：获取自定义属性 removeAttribute：移除属性 原生js 之（BOM操作）->。 DOM事件流 ->。 「点赞、收藏和评论」❤️关注+点赞+收藏+评论+转发❤️，鼓励笔者创作更好的文章，谢谢🙏大家。 |
【本文地址】