首页 > 编程语言 >JavaScript DOM

JavaScript DOM

时间:2024-11-03 19:47:08浏览次数:3  
标签:返回 DOM 对象 JavaScript Element 获取 数组 var

一 获取Element对象

点击查看代码
Document对象中提供了以下获取 Element元素对象的函数
getElementById():根据id属性值获取,返回单个Element对象
getElementsByTagName():根据标签名称获取,返回Element对象数组
getElementsByName():根据name属性值获取,返回Element对象数组
getElementsByClassName():根据class属性值获取,返回Element对象数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>
<div class="cls">呼呼</div>   <br>
<div class="cls">QIQIQI</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
    /*
    获取:使用Document对象的方法来获取
        * getElementById:根据id属性值获取,返回一个Element对象
        * getElementsByTagName:根据标签名称获取,返回Element对象数组
        * getElementsByName:根据name属性值获取,返回Element对象数组
        * getElementsByClassName:根据class属性值获取,返回Element对象数组

     */
    //1. getElementById:根据id属性值获取,返回一个Element对象
    var img = document.getElementById("light");
    // alert(img);

    //2. getElementsByTagName:根据标签名称获取,返回Element对象数组

    var divs = document.getElementsByTagName("div");
    // alert(divs.length);
   /* for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }*/

    //3. getElementsByName:根据name属性值获取,返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
   /* for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);
    }*/

    //4. getElementsByClassName:根据class属性值获取,返回Element对象数组

    var clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }
</script>
</body>
</html>
二 使用
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">QIQIIQ</div>   <br>
<div class="cls">呼呼呼</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
    //1. getElementById:根据id属性值获取,返回一个Element对象
    var img = document.getElementById("light");
    // alert(img);
    img.src = "../imgs/on.gif";
    //2. getElementsByTagName:根据标签名称获取,返回Element对象数组
    var divs = document.getElementsByTagName("div");
    /*
        style:设置元素css样式
        innerHTML:设置元素内容
    */
    for (let i = 0; i < divs.length; i++) {
        //divs[i].style.color = 'red';
        divs[i].innerHTML = "呵呵";
    }
    //3. getElementsByName:根据name属性值获取,返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        //alert(hobbys[i]);
        hobbys[i].checked = true;
    }
    //4. getElementsByClassName:根据class属性值获取,返回Element对象数组

    var clss = document.getElementsByClassName("cls");
    /*for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }*/
</script>
</body>
</html>

标签:返回,DOM,对象,JavaScript,Element,获取,数组,var
From: https://www.cnblogs.com/qiixunlu/p/18523845

相关文章

  • JavaScript知识点梳理及案例实践
    1.Date对象创建Date对象//方法1:不指定参数varnowd1=newDate();console.log(nowd1.toLocaleString());//方法2:参数为日期字符串vard2=newDate("2004/3/2011:12");console.log(d2.toLocaleString());vard3=newDate("04/03/2011:12");console.log(d3.toLoca......
  • JavaScript的DOM操作
    JavaScript的DOM(DocumentObjectModel,文档对象模型)是一种用于表示和操作HTML或XML文档的编程接口。DOM将整个文档建模为一个由节点和对象组成的树结构,使得开发者可以通过JavaScript来访问和修改文档的内容、结构和样式。一、DOM节点DOM节点指的是文档对象模型(DOM......
  • JavaScript的迭代器和生成器
    1.迭代器Iterator1. 基本概念JavaScript表示集合的对象大致有Object,Array,Map,Set四种,并且这四种类型的数据之间可以相互以成员嵌套(如Array的成员可以是Object,而Map又可以嵌入Object的成员中),为了处理所有不同的数据结构,就需要统一的接口机制。迭代器(Iterator)就是这样一种......
  • JavaScript 对象
    一Array数组对象点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><script>//方式一vararr=newArray(1,2,3);......
  • JavaScript基础语法
    ps:区分大小写,//(注释)一输出语句点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><script>window.alert("hellojs~&q......
  • javaScript 和 Java 的语法区别(有前端基础)
    目录一、语法风格1.变量声明2.代码块3.分号二、面向对象编程1. 类和对象的定义2. 方法和属性的访问修饰符3.继承方式 三、数据类型和类型转换1.数据类型 2.类型转换四、异常处理1.语法结构2.异常类型五、开发工具和生态系统1.开发工具2.运行环境各......
  • JavaScript。—关于语法基础的理解—
    一、程序控制语句JavaScript提供了if、if else 和 switch 3种条件语句,条件语句也可以嵌套。(一)、条件语句1、单向判断: if...(1)概述<if>元素用于在判断该语句是否满足特定条件。如果条件不成立,<if>元素内的语句不会被执行。(2)语法格式if(条件){......
  • ECE6101/CSE6461  Distributed,  Independent random
    ECE6101/CSE6461Homework2AssignmentAutumn2024Expected Completion Date: October 11, 20241. Let {N1(t), t ≥ 0} be a Poisson Process with rate λ . Can Z(t) = αN1(t)+βN2 (t) ever bea Poisson Process, where α and β a......
  • HTML期末大作业~我的家乡(洛阳城)旅游网页设计作业成品(HTML+CSS+JavaScript)
    一、......
  • JavaScript语法基础(函数,对象,常用类Array,String,Math和Date)
    JavaScript函数语法:function functionname(){    //执行代码}functioncalculator(a,b){c=a+b;//alert("a+b="+c);returnc;}console.log(c)</script><inputty......