当前位置: 首页 > Web前端 > JavaScript

【浏览器】说说DOM

时间:2023-03-27 16:21:11 JavaScript

【浏览器】说说DOM博客说明文中所涉及的信息来源于网络和个人总结,意在总结个人的学习和经验。如有侵权,请联系我删除。谢谢!说明作为前端开发,之前的大部分工作都是和DOM打交道。现在,大多数前端工程师都在和Vue打交道。让Vue与DOM通信。这不是讽刺,它只是说明了这个事实,也说明了Vue的强大。但是,想要对前端有更深入的了解,就需要打开Vue的保护伞,看看DOM,更重要的是,熟悉DOM。到底部,也到顶部!也许下一代“Vue”的开发者不叫你。什么是DOM?首先介绍一下什么是DOM。这个臭问题这里还是可以延伸的。对不起,我还是摆脱不了这个过程。听W3C的DOM就是文档对象模型(DocumentObjectModel),它是W3C(万维网联盟)的一个标准。它主要定义了访问文档的标准:W3C文档对象模型(DOM)是一个平台和语言中立的接口,允许程序和脚本动态访问和更新文档的内容、结构和样式。W3CDOM标准分为3个不同的部分:CoreDOM——所有文档类型的标准模型Document:文档对象Element:元素对象Attribute:属性对象Text:文本对象Comment:注释对象Node:节点对象,其他5个ParentobjectXMLDOM——XML文档的标准模型HTMLDOM——HTML文档的标准模型听总结DOM就是把标记语言文档的各个组成部分封装成对象。然后开发者(前端抠图)就可以使用这些对象对标记语言文档进行CRUD动态操作。什么是HTMLDOM?当加载网页时,浏览器会创建页面的文档对象模型(DocumentObjectModel)。请注意,JavaScript可以通过HTMLDOM访问和更改HTML文档的所有元素。HTMLDOM是HTML的标准对象模型和编程接口。它定义了:作为对象的HTML元素所有HTML元素的属性访问所有HTML元素的方法所有HTML元素的事件换句话说:HTMLDOM是关于如何获取、更改、添加或删除HTML元素的标准。总结我们熟悉的总结又来了。这次我就不多说了。HTMLDOM是一组用于HTML元素的CURD。Document:Document对象Document对象的属性和方法:HTMLDOMDocument对象的创建(获取)可以通过使用htmldom模型中的window对象来获取。比如在浏览器中输入document,返回一个document对象。window.documentdocumentElement对象元素对象可以有类型为元素节点、文本节点、注释节点的子节点。获取Element对象的方法getElementById():根据id属性的值获取元素对象。id属性值一般是唯一的getElementsByTagName():根据元素名称获取元素对象。返回值为一个数组getElementsByClassName():根据Class属性的值获取元素对象。返回值为一个数组getElementsByName():根据name属性的值获取元素对象。返回值是元素属性和方法的数组。乍一看,太多了,多到根本不想数,更不想在这里直接CV。属性/方法说明element.accessKey设置或返回元素的访问键。element.appendChild()向元素添加一个新的子节点作为最后一个子节点。element.attributes返回元素属性的NamedNodeMap。element.childNodes返回元素的子节点的NodeList。element.className设置或返回元素的类属性。给个开头,然后贴出完整的地址。HTMLDOM元素对象Attr对象位于HTMLDOM中。Attr对象表示HTML属性,HTML属性始终属于HTML元素。操作方法removeAttribute():移除属性setAttribute():设置属性的属性和方法AttrHTMLDOMAttrobjectDOM4警告!在W3CDOMCore中,Attr(属性)对象继承了Node对象的所有属性和方法。在DOM4中,Attr对象不再继承自Node。为了保证未来代码的安全,您应该避免在属性对象上使用节点对象属性和方法。NamedNodeMap对象在HTMLDOM中,NamedNodeMap对象表示元素属性节点的无序集合,NamedNodeMap中的节点可以通过名称或索引(编号)来访问。Text对象Text对象表示HTML表单中的文本输入字段,该元素可以创建单行文本输入字段。onchange事件处理程序在用户编辑显示的文本然后将输入焦点转移到另一个元素时触发。Text的属性和方法HTMLDOMInputText对象Comment对象Comment是一个注释对象。在编写HTML代码时,总会有一些注释,但是注释的代码,众所周知,是不会执行的。在HTML中,它存储在Comment对象中。createComment()方法可以创建评论节点。一般对这个对象的操作比较少,没有地址发帖。写这篇文章最后要说的是,我一直在思考是否有必要写这样一篇文章。其实我觉得很难写出这样的文章。虽然大部分都是一些标准和协议,但往往就是这些标准和协议。突破困难,同时也在慢慢积累和沉淀。如果我能沉下心去写,甚至抄一些基本的东西来补圆段,我会安心很多。这篇也是第二次扩容,从500扩到1500,有机会的话,或者积累多了再扩容。我希望在这些标准之上有所突破。感谢全能的在线菜鸟教程,w3school和努力的自己,个人博客,GitHub测试,GitHub公众号-齐子mo,小程序-小鬼博客