| JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式 | 您所在的位置：网站首页 › js获取自定义属性的元素 › JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式 |
|
当网页被加载时，浏览器会创建页面的文档对象模型DOM（Document Object Model），在DOM中，每个东西都是节点。 DOM四大操作：查找、更新、添加、删除 通过DOM，JavaScript 可创建动态的 HTML： 能够改变页面中的所有 HTML 元素 能够改变页面中的所有 HTML 属性 能够改变页面中的所有 CSS 样式 能够对页面中的所有事件做出反应 前提：首先找到相关元素，前面一篇博客，详细的阐述了DOM查询，详情请看： https://blog.csdn.net/m0_64346035/article/details/124404065 目录 一、DOM操作属性 1、innerHTML 2、innerText 3、getAttribute 4、setAttribute 5、removeAttribute 6、style 7、className 二、DOM创建 1、createElement 2、createTextNode 三、DOM增加 1、appendChild 2、insertBefore 四、DOM删除 removeChild 五、DOM修改 replaceChild 六、获取元素的非行间样式 1、getComputedStyle（非IE使用） 2、currentStyle（IE使用） 一、DOM操作属性通过我们各种获取元素的方式获取到页面中的标签以后，我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上 1、innerHTML功能 a、获取元素内部的HTML结构 b、设置元素内容 hello var div = document.querySelector('div'); console.log(div.innerHTML); div.innerHTML = 'hello '; //设置完后，页面中的div元素里面就会嵌套一个 p 元素 2、innerText功能： a、获取元素内部的文本（只能获取到文本内容，获取不到html标签） b、可以设置元素内部的文本 hello var div = document.querySelector('div'); console.log(div.innerText); //hello div.innerText = 'hello '; //设置完毕以后，会把`hello `当做一个文本出现在div元素里面，而不会把 p 解析成标签 3、getAttribute获取元素的某个属性（包括自定义属性） 4、setAttribute给元素设置一个属性（包括自定义属性） 5、removeAttribute直接移除元素的某个属性 var div = document.querySelector('div'); console.log(div.getAttribute('a')); //100 console.log(div.getAttribute('class')); //box div.setAttribute('a',100); div.setAttribute('class','box'); console.log(div); // div.removeAttribute('class'); console.log(div); // 6、style 专门用来给元素添加 css 样式的添加的都是行内样式 var div = document.querySelector('div'); div.style.width = '100px'; div.style.height = '100px'; div.style.backgroundColor = 'pink'; console.log(div); // 7、className 专门用来操作元素的类名的 var div = document.querySelector('div'); console.log(div.className); // box div.className = 'test'; console.log(div); // // 在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖 二、DOM创建 1、createElement用于创建一个元素节点 // 创建一个 div 元素节点 var oDiv = document.createElement('div'); console.log(oDiv); // 2、createTextNode用于创建一个文本节点 // 创建一个文本节点 var oText = document.createTextNode('我是一个文本'); console.log(oText); // "我是一个文本" 三、DOM增加 1、appendChild向一个元素节点的末尾追加一个节点 语法：父节点.appendChild(要插入的子节点); // 创建一个 div 元素节点 var oDiv = document.createElement('div'); var oText = document.createTextNode('我是一个文本'); // 向 div 中追加一个文本节点 oDiv.appendChild(oText); console.log(oDiv); // 我是一个文本 2、insertBefore向某一个节点前插入一个节点 语法：父节点.insertBefore(要插入的节点，插入在哪一个节点的前面); 我是一个 p 标签 var oDiv = document.querySelector('div'); var oP = oDiv.querySelector('p'); // 创建一个元素节点 var oSpan = document.createElement('span'); // 将这个元素节点添加到 div 下的 p 的前面 oDiv.insertBefore(oSpan, oP); console.log(oDiv); /*我是一个 p 标签 */ 四、DOM删除 removeChild移除某一节点下的某一个节点 语法：父节点.removeChild(要移除的字节点); 我是一个 p 标签 var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 移除 div 下面的 p 标签 oDiv.removeChild(oP) console.log(oDiv) // 五、DOM修改 replaceChild将页面中的某一个节点替换掉 语法：父节点.replaceChild(新节点，旧节点); 我是一个 p 标签 var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 创建一个 span 节点 var oSpan = document.createElement('span') // 向 span 元素中加点文字 oSpan.innerHTML = '我是新创建的 span 标签' // 用创建的 span 标签替换原先 div 下的 p 标签 oDiv.replaceChild(oSpan, oP) console.log(oDiv) /* 我是新创建的 span 标签 */ 六、获取元素的非行间样式我们在操作 DOM 的时候，很重要的一点就是要操作元素的 css 样式，那么在操作 css 样式的时候，我们避免不了就要获取元素的样式，之前我们说过可以用元素.style.xxx来获取，但是这个方法只能获取到元素 行间样式，也就是写在行内的样式 1、getComputedStyle（非IE使用） 语法：widow.getComputedStyle(元素,null).要获取的属性 div { width: 100px; }我是一个 p 标签 var oDiv = document.querySelector('div') console.log(window.getComputedStyle(oDiv).width) // 100px console.log(window.getComputedStyle(oDiv).height) // 100px- 这个方法获取行间样式和非行间样式都可以 2、currentStyle（IE使用） 语法：元素.currentStyle.要获取的属性 div { width: 100px; }我是一个 p 标签 var oDiv = document.querySelector('div') console.log(oDiv.currentStyle.width) // 100px console.log(oDiv.currentStyle.height) // 100px |
| CopyRight 2018-2019 实验室设备网 版权所有 |