首页 > 其他分享> 文章详细

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

2022-09-13 02:00:08 阅读：250 来源： 互联网

标签：nodeName title getAttribute DOM 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

标签：nodeName,title,getAttribute,DOM,setAttribute,节点,属性
来源： https://www.cnblogs.com/feitter/p/16687888.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9