首页 🥭笔记

R535e92c65ddaff1a55f11df10c680c75

Web API - DOM

DOM简介

文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口。

通过DOM接口,可以改变网页的内容,结构和样式

DOM树

image-20210212161811255


文档:一个页面就是一个文档,DOM中使用document表示

元素:页面中所有的标签都是元素,DOM中使用element表示

节点:网页中的所有内容都是节点(标签,属性,文本,注释等),DOM中使用node表示

DOM把以上内容都看作对象


获取元素

如何获取页面元素

  • 根据ID获取
  • 根据标签名获取
  • 用过H5新增的方法获取
  • 特殊元素获取

根据ID获取

使用 getElementById获取带有ID的元素对象

Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。

语法

var element = document.getElementById(id);

注:

  • element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
  • id是大小写敏感的字符串,代表了所要查找的元素的唯一ID.

实例:

    <div id="time">2019</div>
<script>
var time = document.getElementById('time');
console.log(time);
</script>

返回:

image-20210212163222747


根据标签名获取

使用 document.getElementsByTagName可以返回带有制定标签名的对象的集合

实例:

<ul>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
</ul>
<script>
 var tag = document.getElementsByTagName('li');
 console.log(tag);
</script>

返回:

image-20210212164204986

返回的是获取过来元素对象的集合,以伪数组的形式存储的

也就是说我们可以通过提取数组元素的方法得到其中一个元素的内容。


例如:

 console.log(tag[0]);

通过这个,我们可以得到第一个元素的内容:猫狗鼠鱼

如下图:

image-20210212164500904

通过遍历的方式依次打印其中的元素

如果我们想依次打印里面的元素,可以使用遍历的方式:

 for(var i = 0 ;i < tag.length;i++){
     console.log(tag[i]);
 }

得到:image-20210212164821727

得到元素里面的某些标签

element.getElementsByTagName()


如图,我们有两组ul

通过代码:

<ul>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
</ul>
<ul id="nav">
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
</ul>
<script>
var nav = document.getElementById('nav');
  navs =   nav.getElementsByTagName('li')
console.log(navs);
</script>

解释:

image-20210212165810262

输出:

image-20210212170016269


通过HTML新增方法获取元素

document.getElementsByClassName('类名')

document.getElementsByClassName('类名') //根据类名返回元素对象集合

实例:

<p class="new">你好</p>
<script>
var saying = document.getElementsByClassName('new');
console.log(saying);
</script>

返回:

image-20210212170531761

document.querySelector('选择器') //根据指定选择器返回第一个元素对象

document.querySelector('选择器') //根据指定选择器返回第一个元素对象*

实例:

var firstSaying = document.querySelector('.new');
console.log(firstSaying);

说明: 使用 document.querySelector('选择器') 可以直接自动判断选择器类型, .类名class选择器 #类名id选择器

其它形式示例:

image-20210212171231732

返回:

image-20210212171129860


document.querySelectorAll() 返回指定选择器的所有元素对象集合

实例:

var allNav =  document.querySelectorAll('nav');
console.log(allNav);

返回:

image-20210212171646213




文章评论

目录