简单聊聊DOM

MASAILA 发布于2019-08-23 11:35 / 3056人阅读

摘要：讨论在如何去使用元素用于在页面中嵌入或引入脚本代码，该元素默认被定义在元素中页面内容该属性定义规定的文本类型，可以为类型也可以为类型等其他类型和属性类似，这个属性定义脚本使用的语言，该属性不是标准规范定义引用外部脚本的内嵌代码与内

讨论在HTML如何去使用JavaScript

内嵌javascript代码：与内嵌样式表的用法一样，就是将javascript代码通过

外联JavaScript文件：类似于外联样式表的用法，将JavaScript代码编写在独立的JavaScript文件中，再通过HTML页面的

JavaScript文件内容：

var username=document.getElementById("username");
console.log(username);

在元素内部:

在元素内部： DOM

D:document,就是dom将html页面解析为一个文档，同时提供了document对象
O:object，就是dom将html页面中每个元素解析为一个对象
M:model，就是dom中表示各个对象之间的关系

Dom的作用

Dom被设计用于解析HTML页面文档，方便JavaScript语言通过dom访问和操作HTML页面中的内容
Dom是由w3c组织定义标准规范，并且由各大浏览器厂商支持，严格意义上来讲，dom并非属于JavaScript语言
之所以可以在JavaScript语言中使用dom，是因为各大浏览器将dom的标准规范内容封装成了JavaScript语言所支持的形式
对dom中的对象，我们只有调用的权限，没有修改的权限，也说明了这个问题
浏览器加载并运行html页面后，会创建dom结构。由于dom中的内容被封成了JavaScript语言中的对象，所以我们可以使用JavaScript语言通过dom结构来访问和操作html页面中的内容

节点

节点原本是网络术语，表示网络中的连接点，一个网络是由一些节点构成的集合，在dom树结构中，节点也是很重要的一个概念，简单来说，节点作为dom树结构中的连接点，最终构成了完整的dom树结构
通过节点概念，可以将原本的dom树结构改成dom节点树结构进行表示
dom中的m表示model，也可以用来表示dom节点树结构中节点之间的关系
在dom节点树结构中，主要具有以下三层关系：
父级与子级关系
祖先与后代关系
兄弟关系

Document对象

getElementById()方法：获取元素的id属性,返回单个

getElementsByName()方法：获取元素的name属性，返回一个集合

getElementsByTagName()方法：获取html元素，返回一个集合

getElmeentsByClassName()方法：获取元素的calss属性，返回一个集合

querySelector()方法：可以通过选择器获取页面元素，返回单个

querySelectorAll()方法：可以通过选择器获取页面元素，返回一个集合

动态集合(HTMLCollection):根据HTML元素变化而变化，该集合的length属性值是变化的
静态集合(NodeList):不会根据HTML元素变化而变化，如果执行删除操作，该集合可能存在已不存在的元素，但是不会影响length属性值的变化

createElement("元素名"):创建元素节点

createTextNode("文本内容"):创建文本节点

createAttribute("属性名称"):创建属性节点

属性名称.nodeValue="属性值":创建属性节点的属性值

父级元素.appendChild(子级元素):把子级元素添加到父级元素上

GPU云服务器云服务器聊聊聊聊webrtc网关聊聊webrtc网关服务器 DOM

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

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

不得不聊聊的react--入门篇

摘要：一诞生的性能瓶颈，主要有以下原因。注意组件类的第一个字母必须大写，否则会报错。组件并不是真实的节点，而是存在于内存之中的一种数据结构，叫做虚拟。此外，还提供两种特殊状态的处理函数。不会随着时间改变可能不是。本文为学习笔记，适合入门的童鞋，如有错误，请多多指教。一、react诞生 Web app的性能瓶颈，主要有以下原因。（1）Web基于DOM，而DOM很慢。浏览器打开网页时，需要...

lidashuang 2019-08-19 18:04 评论0 收藏0
聊聊为什么淘宝要提出「双飞翼」布局

摘要：于是，淘宝软对针对圣杯的缺点做了优化，并提出双飞翼布局。综合来看，不管的大小高低如何，双飞翼布局都能正常显示，嗯确实很优秀。锤子和钉子综上所见，双飞翼布局更胜一筹。 showImg(https://segmentfault.com/img/bVYtjF?w=922&h=561); 前言突然有一天，脑之里不知怎地蹦出一个词，「双飞翼」，这是很久以前的淘宝提出的一种三栏布局优化方案，然而...

junbaor 2019-08-29 13:47 评论0 收藏0
JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制

摘要：所以，抛开这些歧义和陷阱，我的问题变成了标签的位置会影响首屏时间么然而答案并不是那么显而易见，这得从浏览器的渲染机制说起。说明：本文提到的浏览器均是指Chrome。 script标签指的都是普通的不带其他属性的外联javascript。 web性能优化的手段并不是非黑即白的，有些手段过头了反而降低性能，所以在讨论条件和结论的时候，虽然很多条件本身会带来其他细微的负面或正面影响，为...

VincentFF 2019-08-19 17:22 评论0 收藏0
从一次报错聊聊 Point 事件

摘要：定位问题根据调用栈很快定位到了代码，源码定位到之前一位同事写的组件代码，大概是这样的部分业务代码报错的地方部分业务代码发现是触发了事件，因为没有这个字段，导致抛出异常。它的和鼠标事件很像，非常容易迁移。同步自我的博客，欢迎交流这篇文章在草稿箱里躺了很久，因为最近又遇到了相关问题，于是又整理了一下。请注意这里讲的不是 css 的 pointer-events。起因从某个月黑风高的...

quietin 2019-08-20 16:32 评论0 收藏0
聊聊jQuery的反模式

摘要：如果我们认为模式代表一个最佳的实践，那么反模式将代表我们已经学到一个教训。受启发于的设计模式，在年的月的报告大会上首次提出反模式。参考链接反模式学用设计模式极客学院如果我们认为模式代表一个最佳的实践，那么反模式将代表我们已经学到一个教训。受启发于Gof的《设计模式》，Andrew Koeing在1995年的11月的C++报告大会上首次提出反模式。在Koeing的报告中，反模式有着两...

CoderStudy 2019-08-19 17:45 评论0 收藏0