DOM

文档:DOM中的“D”,当创建一个网页并把它加载到Web浏览器中时,它把编写的网页文档转换为一个文档对象。

对象:DOM中的“O”,对象是一种自给自足的数据集合。与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个特定对象去调用的函数被称为这个对象的方法

模型:DOM中的“M”,它是某种事物的表现形式。DOM把一份文档表示为一颗家谱树。

节点

节点:文档是由节点构成,节点是文档树上的树枝和树叶。

DOM中有许多不同类型的节点,如元素节点,文本节点和属性节点。

元素节点:

标签的名字就是元素的名字。文本段落元素的名字是“p” ,无序清单元素的名字是“u1”,列表项元素的名字是“1i”。

元素可以包含其他的元素。在我们的“购物清单”文档里,所有的列表项元素都包含在-一个无序清单元素的内部。事实上,没有被包含在其他元素里的唯一元素是元素, 它是我们的节点树的根元素。

文本节点:

元素节点只是节点类型的种。如果一份文档完全由一 些空白元素构成,它将有一个结构,但这份文档本身将不会包含什么内容。在内容为王的互联网上,绝大多数内容都是由文本提供的。如<p>元素包含着的文本是一 个文本节点(text node)。
在XHTML文档里,文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含文本节点。

属性节点:

属性节点用来对元素做出更具体的描述。如几乎所有的元素都有一个title属性,我们可以利用这个属性对包含在元素里的东西做出准确的描述,属性节点总是包含在元素节点中。

获取元素

有三种DOM方法可以获取元素节点,分别通过元素ID,标签名字和类名字来获取。

getElementById()

DOM提供了一个名为getElementById的方法,这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象,他说document对象特有的函数,函数名的后面必须跟有一对圆括号,这个圆括号包含着函数的参数。getElementById方法只有一个参数,你想获取的那个元素的id属性的值必须放在单引号或双引号里document. getElementById(id)。文档中的每一个元素都是一个对象。DOM提供的方法能得到任何一个对象。例如:

document. getElementById(“purchases”)`

getElementsByTagName()

getElementsByTagName方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。这个方法也只有一个参数,它的参数是标签的名字:element.getElementsByTagName(tag) 
但它返回的是一个数组,它与getElementById方法有许多相似之处,如:

document. getElementsByTagName("li");

getElementsByClassName()

这个方法可以可以通过Class属性中的类名来访问元素。getElementsByClassName只接受一个参数,就是类名:

getElementsByClassName(class)

这个方法的返回值与getElementsByTagName()类似,都是一个具有相同类名的元素的数组。如:

document.getElementsByClassName("sale");

使用这个方法还可以查找带有多个类名的元素,只要在字符串参数中使用空格分隔类名即可。

总结:

1、一份文档就是一颗节点数。

2、节点分为不同类型:元素节点、属性节点、和文本节点等。

3、getElementById将返回一个对象,该对象对应着文档里的一个特定的元素。

4、getElementsByTagName和getElementsByClassName将返回一个对象数组,它们分别对应着文档里的一组特定的元素节点。

5、每个节点都是一个对象。

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注Devmax的更多内容!

Javascript DOM的简介,节点和获取元素详解的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  6. iOS 10 Safari问题在DOM中不再包含元素

    使用此链接,您可以重现该错误.https://jsfiddle.net/pw7e2j3q/如果您点击元素并从dom中删除它,然后单击链接测试.你应该看到旧的元素弹出选择.是否有一些黑客来解决这个问题?解决方法我能够重现这个问题.问题是,每当您尝试删除其更改事件上的选择框时,iOS10都无法正确解除对选择框的绑定.要解决此问题,您需要将代码更改事件代码放在具有一些超时

  7. iOS 6 javascript与object.defineProperty的间歇性问题

    当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题?https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说

  8. ios – 如何使用JSExport导出内部类的方法

    解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.

  9. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  10. ios – Cordova 3.7在每个本机通话中复制iframe

    由于我已升级到Cordova3.7,每个本地调用都将一个新的iframe附加到DOM,如下所示.为了排除我现有的代码影响cordova的可能性,我尝试使用cordovaCLI创建一个新的代码,添加控制台插件,并在设备控制台中的setInterval循环中调用console.log().因此,我在DOM中收到了大量的iframe.我在iPad3,iOS7上尝试过使用xCode6构建应用程序.有没有人遇到这个问题?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部