普歌-智音团队-DOM 入门基础

普歌-智音团队-DOM 入门基础

一.什么是DOM?

• DOM是document Object Model的缩写，简称文档对象模型。他给文档提供了一种结构化的表示方式，可以改变文档的内容和呈现方式;
• DOM可以用来处理html的程序接口,DOM把网页和脚本以及其他的编程语言联系了起

二.DOM之获取页面元素

1.getElementById(id)        //获取指定元素的ID元素

2.getElementsByTagName()    //获取相同元素的节点列表，通过标签名选择元素，返回值是一个数组

3.getElementsByName()       //通过name值获取元素，返回值是数组，通常用来获取有name的input的值

4.getElementsByClassName()  //通过class名获取元素，返回值是数组n

注意：1.不是所有标签都有name值；2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性

代码示例:



三.DOM之操作元素的属性
1.事件三要素:事件源;事件类型;事件处理程序
2.DOM属性的基本操作（增／删／改／查）
3.tagName //返回值是当前元素的标签名

innerHTML／innerText  //返回值是当前元素的内容
id                    //返回值是当前元素的ID
title                 //获取title的标签值，这个title是从document中获取的
className             //返回值是当前元素的class
href                  //返回值是当前的href的值
 getAttribute()        //获取 元素的属性

setAttribute() //设置／修改 元素的属性，低版本的IE不兼容;接收两个参数，属性名和属性值
removeAttribute() //删除 元素的属性，低版本的IE不兼容

代码示例:
事件的三要素

innerText和innerHTML区别 inneerHtmL识别html标签 可以保留空格和换行

四.操作DOM节点

1. 根据DOM规定，HTML文档中的每个成分都是一个节点。
   DOM是这样规定的：
   整个文档是一个文档节点
   每个HTML标签是一个元素节点
   包含在HTML元素中的文本是文本节点
   每一个HTML属性是一个属性节点
   注释属于注释节点

2.获取DOM节点

      对象.parentNode               //获得父元素节点

      对象.children                 //获得子元素节点的集合，不包含空白节点

                  
      对象.childNodes              //获得所有子节点的集合，包括空白节点
      
      对象.childNodes              //获取当前元素节点的所有子节点
      
      对象.ownerDocument           //获取该节点的文档根节点，相当与 document

      对象.firstChild              //获得第一个子节点。（IE7/8非空白节点，可能是注释节点）
     
      对象.firstElementChild       //获得第一个非空白的子节点。（IE7/8不支持）

      对象.lastChild               //获得最后一个子节点（IE7最后一个元素节点，IE8最后一个非空白节点，可能是注释节点）
      
      对象.lastElementChild        //获得最后一个非空白的子节点。（IE7/8不支持）

      对象.nextSibling             //获得下一个兄弟节点。（包含空白节点和注释，IE7/8包括注释节点，不包括空白节点）
    
      对象.nextElementSibling      //获得下个兄弟节点。（IE7/8不支持）

      对象.previousSibling         //获得上一个兄弟节点。（包含空白节点和注释。IE7/8包括注释节点，不包括空白节点）

代码示例:

父节点
创建节点

三种创建元素的区别

五.给元素注册事件
注册事件的两种方式:①:传统注册方式 特点:利用on开头的事件onclick 具有唯一性;
②:方法监听注册方式 addEventListener()

六.创建对象