其他分享
首页 > 其他分享> > JS DOM:获取元素、getAttribute()方法、setAttribute()方法

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

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