摘要：的操作什么是文档对象模型是和文档的编程接口。向元素添加新的子节点，作为最后一个子节点。移除子节点方法创建节点的拷贝，并返回该副本。方法克隆所有属性以及它们的值。返回指定属性值。返回元素的高度。
JavaScript的DOM操作 什么是 DOM?
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。
为简单起见，在API参考文档中的语法实例通常会使用element(s) 指代节点，使用nodeList（s）或 element(s)来指代节点数组，使用 attribute(s)来指代属性节点。
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
文档是一个文档。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。
DOM 创建document.createElement 创建元素节点
document.createAttribute 创建一个属性节点
document.createTextNode 创建文本节点
DOM 查询querySelector //返回匹配的第一个元素
querySelectorAll //返回匹配的元素集合
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
element.parentNode //父节点
element.firstChild //第一个子元素节点
element.lastChild //最后一个子元素节点
element.previousSibling //上一个元素节点
element.nextSibling //下一个元素节点
DOM 更改element.insertBefore() //在指定的已有的子节点之前插入新节点。
element.appendChild() //向元素添加新的子节点，作为最后一个子节点。
element.removeChild() //移除子节点
element.cloneNode(deep)
cloneNode() 方法创建节点的拷贝，并返回该副本。
cloneNode() 方法克隆所有属性以及它们的值。
如果需要克隆所有后代，把 deep 参数设置 true，否则设置为 false。
element.replaceChild(newnode,oldnode) //替换元素中的子节点。
属性操作element.attributes //返回元素属性的 NamedNodeMap。
element.getAttribute() //返回指定属性值。
element.hasAttribute() //元素是否拥有指定属性。
element.setAttribute() //设置属性值。
element.removeAttribute() //移除属性。
element.textContent //设置或返回文本内容。
element.innerHTML //设置或返回元素的内容。
document.body.classList.add("a","b");
document.body.classList.remove("a");
document.body.classList.contains("myclass");
document.body.classList.toggle("classtest");
element.clientHeight //返回元素的可见高度。
element.clientWidth //返回元素的可见宽度。
element.offsetHeight //返回元素的高度。
element.offsetWidth 返回元素的宽度。
DOM 操作应用点击切换效果：
//html:
div.panels>div.panel*5
//js
var panels = document.querySelectorAll(".panel"); //获取panel的NodeList
panels.forEach(panel=>{panel.addEventListener("click",toggelClass)}); //监听点击事件
function toggelClass(){
let siblings = [].filter.call(this.parentNode.children,child=>child!==this); //获取兄弟元素
siblings.forEach(item=>item.classList.remove("open"));
this.classList.add("open");
}
更新：
silkshadow的github
参考文档HTML DOM 对象
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83445.html
摘要：由于计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。规范由万维网联盟制定。级标准级标准是不存在的，级一般指的是最初支持的。 这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是欧洲计算机制造商协会的缩写，全程是 European Computer Manufacturers Ass...
摘要：插件性能优化及个人常用优化方法经常会触发视觉变化。作用域链指的是当前作用于下可用变量的集合，它在各种主流浏览器中至少包含两个部分局部变量的集合和全局变量的集合。在考虑优化时，数值和变量的性能差不多，并且速度显著优于对象属性和数组元素。 JavaScript 插件性能优化及个人react常用优化方法 JavaScript 经常会触发视觉变化。有时是直接通过样式操作，有时是会产生视觉变化...
摘要：以下内容都是一些概念性的知识点弄懂这些基本的概念是我们在世界看得更远的垫脚石诞生于年年公司开发发布时临时将名字改为当时它的主要目的是处理以前由服务端语言负责的输入验证操作随着其发展现在已不再局限于数据验证而是具备了与浏览器窗口及其内容等几乎 以下内容都是一些概念性的知识点,弄懂这些基本的概念是我们在JavaScript世界看得更远的垫脚石. Javascript Javascript诞...
摘要：简介原文链接简称是一种轻量级，解释型的编程语言，其函数是一等公民。标准的目标是让任何一种程序设计语言能操控使用任何一种标记语言编写出的任何一份文档。核心规定了如何映射基于的文档结构，以便简化对文档的任意部分的访问和操作。 JavaScript 简介 原文链接 JavaScript ( 简称：JS ) 是一种 轻量级，解释型 的编程语言，其函数是一等公民。众所周知，它是用于网页开发的脚...
摘要：而与最大的区别在于与浏览器沟通的窗口，不涉及网页内容。完全依赖于浏览器厂商实作本身无标准规范，而有着所制定的标准来规范。而透过选取出来的节点，我们可以通过操作属性来变更它的文字。在许多的网页前端教学或是文章书籍当中，你可能常常听到这样的说法：「HTML、CSS 与JavaScript 是网页前端三大要素」，其中： HTML 负责资料与结构 CSS 负责样式与呈现 JavaScript 负责...
摘要：与大多数全局对象不同，没有构造函数。为什么要设计更加有用的返回值早期写法写法函数式操作早期写法写法可变参数形式的构造函数一般写法写法当然还有很多，大家可以自行到上查看什么是代理设计模式代理模式，为其他对象提供一种代理以控制对这个对象的访问。 这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇。 如果你错过了前面的章节，可以在这里找到它们： 想阅读更多优质文章请...
阅读 2364·2023-04-26 01:00
阅读 516·2021-10-11 10:59
阅读 2849·2019-08-30 11:18
阅读 2579·2019-08-29 11:18
阅读 919·2019-08-28 18:28
阅读 2913·2019-08-26 18:36
阅读 1994·2019-08-23 18:16
阅读 953·2019-08-23 15:56
