Javascript - 基础内容3

一、DOM编程

1. 概念 ---- document object model 文档对象模型

1）html是标记语言文档，解析技术一般有两种 DOM  SAX

2) DOM：浏览器会将整个文档加载进内存，将文档封装成一棵“文档树”，文档里的

          所有标签都被封装成“标签对象”，成为这棵树上的一个节点（Element--标

          签 ， node -- 文本）

3) DOM里的两个重要对象：

      document对象 --- 代表整个文档（特指body部分，浏览器里地址栏以下，状态

                       栏以上的部分）

      window对象 --- 代表整个浏览器窗口，document是window的一部分（属性），

                     在使用window的属性和函数时，window可以省略。

4）作用：可以通过dom提供的api获取文档中的标签对象，进而修改其属性或者样式，

            达到添加动画效果的目的 。

 2. DOM提供的API --- 获取标签的api

1）根据标签的id属性值获取标签对象  

    Var  tag = document.getElementById(“id属性值”);

2）根据标签名获取标签对象

        Var tags = document.getElementsByTagName(“ 标签名 ”）；

        Var tags = 父标签.getElementsByTagName(“标签名”）； //获取父标签里的标签对象

3）根据标签的name属性获取标签对象

        Var tags = document.getElementsByName(“标签的name属性值”);

           ---- 通常只有form标签里的元素会有name属性

4）根据标签的显示风格名获取标签对象

        Var tags = document.getElementsByClassName(“标签的class属性值”);

5）可以通过修改属性和样式添加动画效果

    获取属性值 -----  var value = 标签对象.属性名

    设置属性值 -----  标签对象.属性名 = 值 ；

    设置样式 ----  标签.style.css样式 = 值；

                           h1.style.color=”red”   h1.style.backgroundColor=”blue”

    设置一种风格 ---- 标签.className = “class样式值”；

 3. Dom里的常见属性

1）innerHTML ： 为标签设置标签体里的内容

2）this ：代表当前产生事件的标签对象

 4. 处理下拉列表的常见属性

1）下拉列表一般使用的是onchange事件

2）options --- 值为数组类型，表示获取下拉列表里的所有option选项

3）selectedIndex --- 值为数字类型，表示下拉列表里被选中的option的下标

4）清空下拉列表 ---  select.options.length=0;

5) 向下拉列表里添加一个option选项

     创建一个option对象 ： var op = new Option(text,value);

     添加到select里 ：  select.options[下标] = op；

 5. 从网页中删除标签

1）需要通过父标签对象删除子标签对象

     parentTag.removeChild( 子标签对象 );

2）对表格进行js处理时，主要针对的是tbody标签，不是table.

3）标签对象的一组相关关系属性：

         tag.parentNode  ---->  获取当前标签的父标签对象

         tag.childNodes  ----->  获取当前标签对象的所有孩子节点（标签和文本）

         tag.firstChild   ----->  第一个孩子节点

         tag.lastChild  ------->  最后一个孩子

         tag.nextSibling  -----> 当前标签对象的同级下一个标签（“弟弟”）

         tag.previousSibling ----> 当前标签对象的同级上一个标签（“哥哥”）

         注意：js存在浏览器差异，google浏览器会默认将标签间的空格也算作孩子节点

4）删除的辅助功能

    var ba = window.confirm(“提示文字”);  

    --- 方法返回boolean值，表示对话框里的选择（确认--true  取消--false）

 6. 向网页中添加标签

   1）产生一个新的标签

        var element = document.createElement(“标签名”);

        例如：<h1>hehehe</h1>

              var h1 = document.createElement(“h1”);

              h1.innerHTML = “hehehe”;

 2) 向网页里添加新建的标签

      I.  parentTag.appendChild( 新标签 );   // 将新标签添加到父标签的最后面

      II.  parentTag.insertBefore(新标签，旧标签);  //将新标签添加到旧标签前

      III. parentTag.replaceChild(新标签，旧标签);  //用新标签替换指定的旧标签

---