这里是修真学院的前端小课堂。每篇文章分享自【背景介绍】【知识解析】【常见问题】【解决方案】【编码实践】【扩展思考】【更多讨论】】【参考文献】八个方面深度剖析前端知识/技能，本文分享：【常见的DOM操作有哪些】一、背景介绍什么是DOM？简单地说，DOM是一组对文档内容进行抽象和概念化的方法。在现实世界中，人们熟悉所谓的“世界对象模型”。例如，当我们在日常环境中使用“汽车”、“房子”和“树”等名词来指代事物时，我们可以100%确定对方知道我们在说什么，因为人们对这些名词所代表的东西有着相同的认知。因此，当你对别人说“车停在车库里”时，可以断定他们不会理解为“鸟锁在壁橱里”。我们的“世界对象模型”不包括可以用来描述客观存在的东西，它也可以用来描述抽象的概念。比如有人要我问路，我给出的答案是“左数第三宫”，这个答案的意思就看这个人对“左”和“第三”的理解能力了。如果他不能数数或分辨左右，我的回答对他没有帮助，无论他是否理解这些概念。在现实世界中，正是因为大家对抽象的“世界对象模型”有了基本的共识，人们才能用非常简单的词语来表达复杂的意思，得到对方的理解。DOM的定义是W3C制定的一个标准，定义为“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式”2.知识分析2.1．什么是节点节点一词是网络术语，表示网络中的连接点。网络是节点的集合。在现实世界中，一切都是由原子构成的。原子是现实世界的节点。但原子也可以进一步分解成更细的亚原子粒子。这些亚原子粒子也是节点。DOM也是如此。文档是节点的集合，但此时的节点是文档树上的枝叶。DOM中有许多不同类型的节点。正如原子包含亚原子粒子一样，有许多类型的DOM节点包含其他类型的节点。接下来，让我们看一下其中的三个：元素节点、文本节点和属性节点。2.2.元素节点DOM中的原子是元素节点。就像我们现在看到的网页，我们在写的时候，会用到
、、
等元素。如果将Web上的文档比作一座建筑物，那么元素就是建造这座建筑物的砖块，这些元素在文档中的布局构成了文档的结构。元素可以包含其他元素。在我们看到的页面中，内容包含在元素中。唯一没有包含在其他元素中的元素是“”，它是我们节点树的根元素，所有其他元素都包含在“”中。网页节点树的一部分2.3．文本节点元素节点只是一种类型的节点。如果一个文档完全由空白元素组成，它会有一个结构，但文档本身将不包含任何内容。在我们的ppt主页中，''元素包含文本，'Sharedby:LiuHongli'。他是一个文本节点。在html文档中，文本节点总是包含在元素节点内。2.4.属性节点属性节点用于更具体地描述元素。例如，几乎所有的元素都有一个title属性，我们可以通过这个属性来准确描述元素中包含的内容：'Thisisagentlereminderptag
'在DOM中，title="agentlereminder"是一个属性节点。因为属性总是放在开始标记内，所以属性节点总是包含在元素节点内。并非所有标签都包含属性，但所有属性都包含在元素中。元素的组成2.5。常见DOM操作获取DOM访问元素节点通过getElementById()方法匹配元素的id属性，对元素节点进行操作通过getElementsByTagName()方法匹配元素的tagName访问元素节点，访问元素节点来操作通过使用getElementsByClassName()方法匹配元素的className来访问元素节点，并对元素节点进行操作值得注意的是getElementsByTagName()和getElementsByClassName()这两个方法是因为访问节点可能是复数的属性，所以你得到的将是一个以数组形式体现的元素节点的集合。我们可以通过打印DOM节点来判断类型为DEMOMOM事件的onClick事件。用户进入时执行onunload事件---用户离开时执行onmouseover事件---用户鼠标指针移动时执行onmouseout事件---用户鼠标指针移出时执行onmousedown事件---执行时theuserpressedthemousedownonmouseupevent---当用户释放鼠标按钮时执行如何设置demoFAQ的class和tag属性？4.解决方案往往在一个页面中有多个同一个类的元素和多个同一个标签的元素。调用时方法如下Demo扩展思考onblur事件---对象失去焦点时发生onchange事件---对象字段的值改变时发生button事件---属性可以返回一个整数表示事件触发时点击了哪个鼠标按钮更多事件不再一一描述。有兴趣的同学可以看看这本W3SChool参考书：《JavaScript DOM编程艺术》网址：w3SChool7。更多的讨论是同步的，而渲染是异步的。因为JavaScript引擎线程和GUI渲染线程是互斥的，就是我执行的时候你站在一旁，我执行完你再执行。详情请看这篇文章https://segmentfault.com/a/11...《关于修改DOM是异步还是同步的问题》问：除了getElementsByClassName(),getElementsByTagName(),getElementById()，还有其他获取dom节点的方法吗A:1、通过节点属性获取元素1）节点属性：获取节点的名称、类型、值。js代码：Window.Onload=Function(){sub-nodevarpox=document.GetelementByid('Pox');alert(pox.childNodes.length)//子节点个数alert(pox.ChildNodes[0].//第一个子节点的内容alert(pox.firstChild.nodeValue);//第一个子节点的内容alert(pox.lastChild.nodeValue);//最后一个节点的内容node:only};获取当前节点的东西，上面的js代码中，节点自己把节点指针放在了元素上，所以它没有2.层次节点属性：层次节点可以分为父子节点和兄弟节点，可以通过当前节点获取其他层节点。2.1)ChildNodeschildNodes，节点的第一个字节firstChilds，最后一个字节子节点lastChilds。js代码：window.onload=function(){子节点varpox=document.getElementById('pox');alert(pox.childNodes.length)//子节点个数alert(pox.childNodes[0].nodeValue);//第一个子节点的内容alert(pox.firstChild.nodeValue);//第一个子节点的内容alert(pox.lastChild.nodeValue);//最后一个节点的内容};2.2）ParentChild，兄弟节点previousSibing，nextSibing。js代码：window.onload=function(){父节点、上下节点varpox=document.getElementById('pox');警报（pox.parentNode）；//pox节点body节点的父节点alert(pox.firstChild.nextSibling);//pox节点的子节点中第一个节点的下一个节点alert(pox.lastChild.previousSibling);//pox节点的子节点中最后一个节点的前一个节点alert(pox.lastChild.previousSibling.nodeName)};此答案摘自---------------------http：//blog.csdn.net/u0109283...q：dom操作的最佳实践应该是什么：2、JavaScript分离：将HTML内部的DOM事件与外部分离，保证HTML的纯洁性。同时，可以通过获取外部js文件中的DOM节点，以向节点添加事件的形式运行外部JavaScript文件。3、向后兼容：由于不同的浏览器对JavaScript的支持不一致，大部分浏览器或多或少都可以支持JavaScript，但老的浏览器可能无法理解DOM提供的内容。方法和脚本。因此，我们通过以下几点来确保那些古老的浏览器不会出现脚本代码问题。3.1.对象检测：检测浏览器对JavaScript的支持。我们可以把某个方法包裹在一个if语句中，然后根据这个语句的条件表达式的求值结果是true（这个方法存在）还是false（这个方法不存在）来决定应该采取什么动作。例如，如果您有一个使用getElementById()方法的函数，您可以在调用getElementById()方法之前检查用户的浏览器是否支持该方法。使用对象检查时，一定要把方法名后面的括号去掉，如果不去掉，不管方法是否存在，测试的都是方法的结果代码：if(!document.getElementById)returnfalse;4.性能方面的考虑：为了保证应用的顺利运行，在为文档编写应用脚本时需要注意一些问题。.例如，当我们需要访问html页面中的所有div元素来寻找我们想要的节点时，我们不知道有多少div元素会面对我们，所以浏览器会搜索整个DOM树来寻找可能匹配的元素.另一个是尽量减少文档中的标记量。太多不必要的元素只会增加DOM树的大小，进而增加遍历DOM树寻找特定元素的时间。4.2.合并和放置脚本我们通过合并外部JavaScript文件来减少加载页面时发送的请求数。优化性能时，减少请求数通常是优先考虑的事项。“压缩文件”的目的是通过删除脚本文件中不需要的ear字节，如空格、注释等来实现的。》我们相信人人都可以成为工程师，现在就开始，找个师兄指导你入门，学习的路上不再迷茫，这里是技能树。IT修真学院：http:///www.jnshu.com，适合初学者切换到互联网行业的聚集地。”欢迎加入IT交流群565734203与大家一起探讨交流
