DOM对象，控制HTML对象

关注

原创最新推荐文章于 2026-04-24 10:27:22 发布 520 阅读 AI 写同款· GEO 优化 ›

《电源是怎样炼成的》学习笔记：从拓扑到PCB的完整电源设计指南电源设计是硬件工程师的核心技能，涉及线性电源与开关电源两大方向。线性电源以低纹波、高精度见长，而开关电源通过高频开关与电感储能实现高效率转换。理解Buck、Boost、反激等拓扑原理，掌握电感选型、续流二极管配置及PCB layout技巧，是解决实际工程问题的关键。测试环节中，纹波测量需注意探头接地方式，环路稳定性依赖相位裕度分析。从防反接电路到输入防护滤波，从ATX电源改造到EMC设计，完整的电源知识体系能帮助工程师应对复杂场景。本文以《电源是怎样炼成的》为核心框架，结合硬件设计中的高频痛点，提供从原理到阅读详情

1.getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法：document.getElementsByName(name)

注意：（1）因为文档中的name属性可能不唯一，所有getElementsByName()方法返回的是元素的数组，而不是一个元素。

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

2.getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法：document.getElementByTagName(Tagname)

说明:（1）Tagname是标签的名称，如p、a、img等标签吗

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

3.程序

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>无标题文档</title>
    </head>
    
    <body>
        <form>
          请选择你爱好:<br>
          <input type="checkbox" name="hobby" id="hobby1">  音乐
          <input type="checkbox" name="hobby" id="hobby2">  登山
          <input type="checkbox" name="hobby" id="hobby3">  游泳
          <input type="checkbox" name="hobby" id="hobby4">  阅读
          <input type="checkbox" name="hobby" id="hobby5">  打球
          <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
          <input type="button" value = "全选" onclick = "checkall();">
          <input type="button" value = "全不选" onclick = "clearall();">
          <p>请输入您要选择爱好的序号，序号为1-6:</p>
          <input id="wb" name="wb" type="text" >
          <input name="ok" type="button" value="确定" onclick = "checkone();">
        </form>
        <script type="text/javascript">
        function checkall(){
            var hobby = document.getElementsByTagName("input");
            for(var i=0;i<hobby.length;i++)
            {
                hobby[i].checked=true;
            }
          // 任务1 
           
        }
        function clearall(){
            var hobby = document.getElementsByName("hobby");
            for(var i=0;i<hobby.length;i++)
            {
                hobby[i].checked=false;
            }
         // 任务2    
            
        }
        
        function checkone(){
            clearall();
            var hobby = document.getElementsByName("hobby");
            var j=document.getElementById("wb").value;
            for(var i=0;i<j.length;i++){
                if(j.charAt(i)>6 || j.charAt(i)<1){
                    alert("越界,请重新输入！");
                    document.getElementById("wb").value="";
                }
            }
                for(var n=0;n<j.length;n++){
                   
                        hobby[(j.charAt(n))-1].checked=true; 
                }

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

4.getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：elementNode.getAttribute(name)

说明：（1）elementNode：使用getELementById()、getElementByTagName()等方法，获取到的元素节点。

（2）name:要想查询的元素节点的属性名字。

5.setAttribute()方法

setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：elementNode.setAttribute(name,value);

说明：name:要设置的属性名 value：要设置的属性值

6.节点属性

在文档对象属性（DOM）中，每个节点都是一个对象，DOM节点有三个重要属性：nodeName：节点名称 nodeValue：节点的值 nodeType：节点的类型

（1）nodeName属性：节点的名称，是只读的。