javaScript学习DOM模型

DOM 全称是 Document Object Model 文档对象模型
大白话,就是把文档中的标签,属性,文本,转换成为对象来管理

 

                                                                                                                                                                                                                                  Document 对象的理解:
               第一点:Document 它管理了所有的 HTML 文档内容。
               第二点:document 它是一种树结构的文档。有层级关系。
               第三点:它让我们把所有的标签 都 对象化
               第四点:我们可以通过 document 访问所有的标签对      

模拟对象化,相当于:

class Dom{

      private String id; // id 属性

      private String tagName; //表示标签名

      private Dom parentNode; //父亲

      private List children; // 孩子结点

      private String innerHTML; // 起始标签和结束标签中间的内容

}                                                      

这只是模拟java中的类

Document 对象中的方法介绍(*****重点)

            通过标签的 id 属性查找标签 dom 对象,elementId 是标签的 id 属性值
            document.getElementById(elementId)   

            通过标签的 name 属性查找标签 dom 对象,elementName 标签的 name 属性值
            document.getElementsByName(elementName)

            通过标签名查找标签 dom 对象。tagname 是标签名
            document.getElementsByTagName(tagname)

           通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名  
           document.createElement( tagName)

 

document 对象的三个查询方法,如果有 id 属性,优先使用 getElementById 方法来进行查询
如果没有 id 属性,则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

 

getElementById():


                   

getElementsByName 方法示例代码:

 

 

 

getElementsByTagName 方法示例代码:

 

createElement 方法示例代码:

posted @   自学Java笔记本  阅读(31)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示