web前端 (11)JS 03

目录
根据元素层次, 查找元素对象 *
文档元素的 创建 / 插入 / 删除 / 清空
    省市县三级联动案例
元素对象 了解

根据元素层次, 查找元素对象 *

• 获取父元素对象 ***
  var 父元素对象 = 元素对象.parentNode

• 获取第一个子元素对象
  var 元素对象 = 元素对象.firstChild;

• 获取最后一个子元素对象
  var 元素对象 = 元素对象.lastChild;

• 获取所有子元素对象 (结果是数组)
  var 子元素数组 = 元素对象.childNodes;

表单验证案例:

<script type="text/javascript">
var flag = false;
function x1(input){
    var text = input.value;
    var span = input.parentNode.lastChild;
    if(text.length>=6){
        //输入可用的
        flag = true;
        span.innerHTML = "恭喜你, 输入可用";
        span.style = "font-size:12px;color:#0a0";
    }else{
        flag = false;
        //输入不可用的                
        span.innerHTML = "很遗憾, 输入不可用";
        span.style = "font-size:12px;color:#a00";
    }
}
function x2(){
    if(!flag){
        alert("请检查错误项");
    }
    return flag;
}

  

区分元素类型 了解

元素对象拥有一些属性:

-   nodeType    :   表示元素的类型, 值为 1 / 2 / 3 (1表示节点,2表示属性,3表示文本)
-   nodeName    :   获取节点的名称
-   nodeValue   :   文本获取为内容, 节点获取为null !

文档元素的 创建 / 插入 / 删除 / 清空
创建节点

var element = document.createElement(“节点名称”);

插入节点

• 通过父元素 , 追加子元素
  格式: 父元素对象.appendChild(新的元素对象);

• 通过父元素 , 插入子元素
  格式: 父元素对象.insertChild(新的元素对象,参考子元素);
  // 新的子元素会被插入到参考子元素之前 , 如果参考子元素不存在 ,则效果为追加子元素 !

删除节点

父元素.removeChild(子元素对象);

清空元素内容

元素对象.innerHTML= “”;

省市县三级联动案例

省份:    市:    县/区: 

元素对象 了解
select对象 了解

属性:
- options : 获取到下拉选择框中所有的option对象
- selectedIndex : 获取当前选择项的下标

函数:
- add(option对象) : 追加一个选项
- remove(index) : 删除指定索引的选项

事件:
- onchange : 当选择项被改变时

option对象 了解

创建对象: var opt = new Option(“文本内容”,value属性值);

属性:
- index : 获取当前选项 在所有选项中的 索引值 !
- text : 获取文本内容, 与innerHTML属性效果一致
- value : 获取与设置value属性值
- selected: boolean类型, true表示当前选项处于选中状态 !

table对象 (表格 table 标签) 了解

属性:
- rows : 获取当前表格中的所有行对象 (tableRow数组)
函数:
- insertRow() : 追加一行, 并返回追加行的tableRow对象
- insertRow(index) : 向指定索引位置, 插入一行, 并返回tableRow对象
- deleteRow(index) : 从指定索引位置删除一行 .

tableRow对象 (表格行 tr标签) 了解

属性:
- cells : 获取当前表格行中的所有列对象 (tableCell数组)
- rowIndex: 获取当前表格行 在表格中的下标 !
函数:
- insertCell() : 追加一列, 并返回追加行的tableCell对象
- insertCell(index) : 向指定索引位置, 插入一列, 并返回tableCell对象
- deleteCell(index) : 从指定索引位置删除一列 .

tableCell对象(表格列 td标签) 了解

属性:
- cellIndex : 获取当前列, 在表格行中的索引值
- colSpan : 获取与设置 td垂直占用单元格的数量
- rowSpan : 获取与设置 td横向占用单元格的数量