JS DOM：获取元素、getAttribute()方法、setAttribute()方法

2022/9/13 6:53:15

编程Tag： 属性 title Dom 节点 setAttribute nodename getattribute

本文主要是介绍JS DOM：获取元素、getAttribute()方法、setAttribute()方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

先来看看下面代码:

1).将HTML代码分解为DOM节点层次图:

2).HTML文档可以说由节点构成的集合，DOM节点有:

3).节点属性:

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

1、nodeName : 节点的名称
2、nodeValue ：节点的值
3、nodeType ：节点的类型

（一）.nodeName 属性: 节点的名称，是只读的。

1、元素节点的 nodeName 与标签名相同
2、属性节点的 nodeName 是属性的名称
3、文本节点的 nodeName 永远是 #text
4、文档节点的 nodeName 永远是 #document

（二）.nodeValue 属性：节点的值

1、元素节点的 nodeValue 是 undefined 或 null
2、文本节点的 nodeValue 是文本自身
3、属性节点的 nodeValue 是属性的值

（三）.nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

4).遍历节点树:

以上图\ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

5).DOM操作:

【注意】:前两个是document方法。

一、区别getElementById,getElementsByName,getElementsByTagName

【注意】：方法区分大小写

【案例】

勾选框案例.gif
【参考答案】
任务1处补充完整，实现当点击"全选"按钮时，将选中所有的复选项。
提示:document.getElementsByTagName("input")获取的是所有input标签，包括复选项和按钮，所以要判断是否是复选项，如是选中。

任务2处补充完整，实现当点击"全不选"按钮时，将取消所有选中的复选项。

任务3处补充完整，在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入的数值，通过id选中相应的复选项。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>JS DOM应用</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(){
            var j=document.getElementById("wb").value;
            if(parseInt(j)>6||parseInt(j)<1)
            {
                alert("请输入1-6之间的数字");
            }
         // 任务3
            var hobby=document.getElementsByName("hobby");
            hobby[parseInt(j)-1].checked=true;
        }
        
        </script>
    </body>
</html>

二、getAttribute()方法、setAttribute()方法

【注意】：
1:setAttribute()方法，把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2:类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

【案例】以下为li列表title的值,当title为空时，新设置值为"WEB前端技术"：
任务一：使用getAttribute()方法获取元素属性值，保存在变量text。
任务二：使用setAttribute()方法设置title属性值。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute和setAttribute</title>
</head>
<body>
  <p id="intro">我的课程</p>  
  <ul>  
    <li title="JS">JavaScript</li>  
    <li title="JQ">JQuery</li>  
    <li title="">HTML/CSS</li>  
    <li title="JAVA">JAVA</li>  
    <li title="">PHP</li>  
  </ul>  
  <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">
  var Lists=document.getElementsByTagName("li");
  for (var i=0; i<Lists.length;i++)
  {
    var text = Lists[i].getAttribute("title");//任务一
    document.write(text +"<br>");
    if(text=="")
    {
     Lists[i].setAttribute("title","WEB前端技术");//任务二
    document.write(Lists[i].getAttribute("title")+"<br>");
    }
  }
</script>
</body>
</html>

原文出自：https://www.jianshu.com/p/ecd53e5eec7c

这篇关于JS DOM：获取元素、getAttribute()方法、setAttribute()方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！