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 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

4).遍历节点树:

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

5).DOM操作:

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

一、区别getElementById,getElementsByName,getElementsByTagName

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

【案例】

勾选框案例.gif

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

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

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

    
        
        
    
    
    
        

          请选择你爱好:

            音乐
            登山
            游泳
            阅读
            打球
            跑步 

          
          
          
请输入您要选择爱好的序号，序号为1-6:
          
          
        
        
    

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

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

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

  
我的课程
  
  
  
    
JavaScript
  
    
JQuery
  
    
HTML/CSS
  
    
JAVA
  
    
PHP
  
  
  
  
以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":

end.
本笔记整理自慕课网