JavaScript的DOM操作

琛ｈ。发布于2019-08-20 17:16 / 3078人阅读

摘要：的操作什么是文档对象模型是和文档的编程接口。向元素添加新的子节点，作为最后一个子节点。移除子节点方法创建节点的拷贝，并返回该副本。方法克隆所有属性以及它们的值。返回指定属性值。返回元素的高度。

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 对象

GPU云服务器云服务器 javascript_dom操作 javascript的dom对象 javascript的dom编程 Dom操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83445.html

001-读书笔记-JavaScript高级程序设计 JavaScript简介

摘要：由于计算机的国际化，组织的标准牵涉到很多其他国家，因此组织决定改名表明其国际性。规范由万维网联盟制定。级标准级标准是不存在的，级一般指的是最初支持的。这篇笔记的内容对应的是《JavaScript高级程序设计(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是欧洲计算机制造商协会的缩写，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 评论0 收藏0
个人常用JavaScript及React常用优化总结

摘要：插件性能优化及个人常用优化方法经常会触发视觉变化。作用域链指的是当前作用于下可用变量的集合，它在各种主流浏览器中至少包含两个部分局部变量的集合和全局变量的集合。在考虑优化时，数值和变量的性能差不多，并且速度显著优于对象属性和数组元素。 JavaScript 插件性能优化及个人react常用优化方法 JavaScript 经常会触发视觉变化。有时是直接通过样式操作，有时是会产生视觉变化...

yuanxin 2019-08-20 15:07 评论0 收藏0
Javascript简介

摘要：以下内容都是一些概念性的知识点弄懂这些基本的概念是我们在世界看得更远的垫脚石诞生于年年公司开发发布时临时将名字改为当时它的主要目的是处理以前由服务端语言负责的输入验证操作随着其发展现在已不再局限于数据验证而是具备了与浏览器窗口及其内容等几乎以下内容都是一些概念性的知识点,弄懂这些基本的概念是我们在JavaScript世界看得更远的垫脚石. Javascript Javascript诞...

Near_Li 2019-08-21 10:40 评论0 收藏0
JavaScript 简介

摘要：简介原文链接简称是一种轻量级，解释型的编程语言，其函数是一等公民。标准的目标是让任何一种程序设计语言能操控使用任何一种标记语言编写出的任何一份文档。核心规定了如何映射基于的文档结构，以便简化对文档的任意部分的访问和操作。 JavaScript 简介原文链接 JavaScript ( 简称：JS ) 是一种轻量级，解释型的编程语言，其函数是一等公民。众所周知，它是用于网页开发的脚...

URLOS 2019-08-20 10:33 评论0 收藏0
谈谈浏览器里的JavaScript

摘要：而与最大的区别在于与浏览器沟通的窗口，不涉及网页内容。完全依赖于浏览器厂商实作本身无标准规范，而有着所制定的标准来规范。而透过选取出来的节点，我们可以通过操作属性来变更它的文字。在许多的网页前端教学或是文章书籍当中，你可能常常听到这样的说法：「HTML、CSS 与JavaScript 是网页前端三大要素」，其中： HTML 负责资料与结构 CSS 负责样式与呈现 JavaScript 负责...

CastlePeaK 2019-05-23 17:32 评论0 收藏0
JavaScript 是如何工作的：编写自己的 Web 开发框架 + React 及其虚拟 DOM

摘要：与大多数全局对象不同，没有构造函数。为什么要设计更加有用的返回值早期写法写法函数式操作早期写法写法可变参数形式的构造函数一般写法写法当然还有很多，大家可以自行到上查看什么是代理设计模式代理模式，为其他对象提供一种代理以控制对这个对象的访问。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇。如果你错过了前面的章节，可以在这里找到它们：想阅读更多优质文章请...

余学文 2019-08-26 13:30 评论0 收藏0