DOM对象

DOM

  • 概念:Document Object Model，文档对象模型.
  • 将标记语言的各个组成部分封装为对应的对象:
    • Document:整个文档对象
    • Element:元素对象
    • Attribute:属性对象Text:文本对象
    • Comment:注释对象

Element:元素对象

1. 获取Element元素对象

  • HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
  • Document对象中提供了以下获取Element元素对象的函数:
  1. 根据id属性值获取，返回单个Element对象
var h1 = document.getE1ementById( 'h1 ' ) ;
  1. 根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName( " div " );
  1. 根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName( " hobby ' );
  1. 根据class属性值获取，返回Element对象数组
var clss = document.getElementsByclassName( 'cls ');

代码


<script>

    // 1.获取Element元素
    // 1.1获取元素 -根据id获取
    var img = document.getElementById('h1');
    alert(img);

    // 1.2获取元素-根据标签获取 -div
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }



    // 1.3获取元素-根据name属性获取
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);
    }

    // 1.4获取元素-根据class属性获取
    var divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }


</script>

2.查询参考手册、属性、方法



    // 2.查询参考手册，属性，方法
    var divs = document.getElementsByClassName('cls');
    //修改元素内容
    divs[0].innerHTML="烈烈";

DOM案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM案例</title>
</head>
<body>

<img src="../../img/off.gif" id="h1" alt="这是一张图片">
<!--<img src="../../img/on.gif" id="h2" alt="这是一张图片">-->
<br>
<br>
<div class="cls">满汉全席</div>  <br>
<div class="cls">岑岑</div>  <br>

<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏






<script>

  //1.点亮灯泡：src属性值
  var img = document.getElementById('h1');

  img.src = "../../img/on.gif";



  // 2.将所有div标签的内容后面加上： very good(红色字体)
  var divs = document.getElementsByTagName('div');
  for (let i = 0; i < divs.length; i++) {
    const div= divs[i];
    div.innerHTML+="<font color=\"red\">very good</font>";

  }


  // 3.使所有的复选框呈现选中状态
  var ins = document.getElementsByName('hobby');
  for (let i = 0; i < ins.length; i++) {
    const check = ins[i];
    check.checked = true; //选中
  }


</script>

</body>
</html>
posted @ 2023-04-08 21:34  流浪猫老大  阅读(37)  评论(0)    收藏  举报