JavaScriptDOM文档对象模型

本文深入探讨了DOM(文档对象模型)的概念,包括其组成部分及如何通过JavaScript进行操作。介绍了DOM中不同类型的对象,以及如何利用getElementById,getElementsByTagName和getElementByClassName等方法获取和设置属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaScriptDOM文档对象模型
一、文档(D)
  一个网页运行在浏览器中,他就是一个文档对象。
二、对象(O)
  “对象”是一种自足的数据集合。与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函数被称为这个对象的方法。
  JavaScript中有三种类型的对象:
  ①用户自定义对象:不做了解
  ②内建对象(native object):JavaScript中一开始就存在的。列如Array,Math,Date等(JavaScript语法区分大小写)
  ③宿主对象(host object):由浏览器提供的对象。列如window对象,尽量不使用这种对象。
三、模型(M)
  DOM中M,既Model模型,代表这某种一类事物的表现形式,浏览器提供了网页的模型,JavaScript读取模型,获取信息,操作DOM。

DOM

  • 1
  • 2
  •     </ul>
    
    </body></html>
    

html代表整个文档,标签下包含两个分支和,下包含

  • ,
    • 下包含
    • 。这些节点元素组成了一个完整的网页。JavaScript通过获取节点元素来操作DOM模型。
      四、DOM对象获取元素节点的方法
      1.getElementById
        document对象特有的函数。document.getElementById(id),id对应节点元素的id值,用“id的值”或’id的值’表示。改方法返回的是一个对象object
      2.getElementsByTagName
        getElementsByTagName类似于getElementById,它的参数是标签的名字;列如想获取标签li的对象,即为document.getElementsByTagName(“li”),返回类型为object数组。获取某个文档有多少个元素节点可以用alert(document.getElementByTagName("*").length)。*为通配符,代表所有元素节点。
      3.getElementByClassName
        getElementByClassName为HTML5新增方法,通过class属性中的类型访问元素。getElementByClassName(class)也与getElementsByTagName类似,返回值也是一个具有相同元素的数组。
      五、获取和设置属性
      1.getAttribute
        getAttribute是一个函数,可以返回一个元素的属性值。object.getAttribute(“元素”)
        例如获取p元素的title属性
      var paras = document.getElementTagName(“p”);
      for(var i=0;i<paras.length;i++){
      alert(paras[i].getAttribute(“title”));+}
      2.setAttribute
        设置修改元素节点的值,只能用于元素节点。
      objet.setAttribute(attribute,value)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值