DOM的使用

什么是DOM

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX,它可以用于处理很大的XML文档,由于大,所以不适合全部放在存储器中处理。

DOM树

在这里插入图片描述DOM把以上内容都看做对象!

DOM如何获取页面元素

根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象
具体方法参考MDN web docs 网站搜索查看
在这里插入图片描述1.先写标签;
2.标签下写,再将getElementByld()写进

根据标签名(类标签)获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
ps:用法与ID获取方法一样,只不过括号里写的是类标签
例如:

<body>
<ui>
     <li> 123木头人</li>
     <li> 123木头人</li>
     </ui>
<script>
//1.返回的是获取过来元素对象的集合 以喂伪数组的形式存储
var lis =document.getElementsByTagName('li');
console.log(lis); //输出的是伪数组
onsole.log(lis[0]); //控制台输出第一个li内容
//2.若想要依次打印里面的元素对象可采取遍历的方式
for(var i = 0; i<lis.length;i++){
  console.log(lis[i]); 
  }
</script>
</body>

当遇到有多个块有相同的标签,但我们只想获取特定那一个时,可以使用如下:

<body>
<ui>
     <li> 123木头人</li>
     <li> 123木头人</li>
     </ui>
  <ui div="nav">
     <li> 立定跳远</li>
     <li>立定跳远</li>
     </ui>
<script>
//3.element..getElementsByTagName() 可以得到这个元素的某些标签
  var nav =document.getElementById('nav');//这个用来获取nav元素
  var navlis =nav.getElementsByTagName('li');
   console.lognav(lis);

注意!
1.因为得到的是一个对象的集合,所以我们想要操作里面的元素需要遍历;
2.得到的元素对象是动态的
3.若想要获取整个页面的某类标签,则在getElementsByTagName()前用的是document,即document.getElementsByTagName();若想要的是该标签的某一个,则需要先用ID的方式getElementById()获取该元素,在用getElementsByTagName()获取该元素的类标签的元素,此时getElementById()没有S。

通过HTML5新增的方法获取(IE6、7、8里不可用)

特殊元素获取

因为下面两种作者不常用,用到会更新的!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值