JS第五天

1.DOM访问表单控件：先获取表单的form元素，获取属性值：表单元素.action；表单元素.method获取提交方式；表单元素.elements获取表单内所有表单控件组成的数组，可以访问表单的任何控件；表单元素.target获取提交表单是的结果窗口；表单元素.reset()设置重置表单功能；表单元素.submit()设置提交表单功能

2.访问表单控件的方法：访问第index个控件：表单元素.elements[index]；表单元素.elements["x"]访问表单内id或name为x的表单控件；表单元素.x访问表单内id或name为x的表单控件

var formss;
//页面加载完成后执行
window.onload=function(){
    formss=document.getElementById("myform");
}
function get1(){
     //获取action的属性值
    var ac=formss.action;
    /*alert(ac);*/
    //获取表单提交方式
    var me=formss.method;
    alert(me);
}
//获取表单控件第一个值
function get2(){
    //第一中获取方式
    //var val=formss.elements[0].value;
    //第二种
    //var val=formss.elements["username"].value;
    var val=formss.username.value;
    alert(val);
}
//通用方式
function get(obj){
    var i=obj.value
    alert(i);
}
//操作表单
function oper(){
    //重置表单
    //formss.reset();
    //提交表单
    formss.submit();
}

3.DOM访问下拉菜单：先获取selected元素，下拉菜单.length获取下拉菜单个数；下拉菜单.options获取下拉菜单里所有选项组成的数组；下拉菜单.selectedIndex获取选项索引；元素名称.type获取类型，多选的是select-multiple,单选返回select-one

4.使用options访问下拉选项属性：options.defaultSelected返回该选项是否被默认选中；options.index获取索引；options.selected获取该选项是否被选中；options.text获取文本；options.value获取属性值

5.DOM访问表格子元素，现获取表格table对象；表格.caption获取标题对象；表格..rows获取表格的所有行；表格.rows.cells获取该行的列

// JavaScript Document
var tables;
window.onload=function(){
    tables=document.getElementById("mytable");
}
//通用方法
function get(obj){
    alert(obj.innerHTML);
}
//设置摸个元素的文本节点 ：元素节点.innerHTML=值
//修改
function updateCell(){
    //获取要修改的行的下标
    var rowIndex=document.getElementById("row").value-1;
    //获取要修改的列的下标
    var cellIndex=document.getElementById("cell").value-1;
    //获取要修改后的内容
    var content=document.getElementById("course").value;
    //修改
    tables.rows[rowIndex].cells[cellIndex].innerHTML=content;
}

6.使用DOM创建节点的方法：document.createElement("html元素")

7.添加节点：父节点.appendChild("新创建的节点")；插入节点：父节点.insertBefore(新节点，旧节点)；替换节点：父节点.replaceChild(新节点，旧节点

var ul;
window.onload=function(){
    ul=document.getElementById("city");
}
//设置css样式格式：元素节点.style.样式名=样式值
function create(){
    //创建新节点元素li
    var li=document.createElement("li");
    //给新节点添加文本节点
    li.innerHTML="淄博";
    //设置字体红色
    li.style.color="red";
    //将新节点li添加在ul最后一个子节点上
    ul.appendChild(li);
}
//插入节点
function create2(){
    //创建新节点li
    var li=document.createElement("li");
    li.innerHTML="淄博";
    //获取旧节点（在谁前面插入这个新节点）
    //var ref=ul.firstChild.nextSibling;
    var ref=ul.getElementsByTagName("li")[0];
    //在旧节点前插入新节点Li
    ul.insertBefore(li,ref);
}
//替换节点
function create3(){
    //创建新节点li
    var li=document.createElement("li");
    li.innerHTML="济南";
    //获取旧节点
    var ref=ul.getElementsByTagName("li")[0];
    //新节点替换旧节点
    ul.replaceChild(li,ref);
}

 

)