< 笔记 > DOM - 03 DOM 示例

03 DOM 示例

By Kevin Song

03-01 示例一:字体大中小改变
03-02 示例二:展开闭合列表
03-03 示例三:好友列表
03-04 示例四:创建表格
03-05 示例五:行颜色间隔显示并高亮
03-06 示例六:全选商品
03-07 示例七:邮件系统
03-08 示例八:单选按钮
03-09 示例九:下拉菜单
03-10 示例十:附件

03-01 示例一:字体大中小改变

方法一:给标签节点对象设置font,color等属性

思路

  • 标签封装数据(HTML)
  • 定义页面样式(CSS)
  • 确定事件源,事件,处理方式中被处理的节点(DOM)
    • 事件源 标签
      • 要给超链接加入自定义的事件处理,要先取消超链接的默认点击效果:href=”javascript:void(0)”
    • 事件 onclick
    • 被处理的节点
      -newstext
  • 处理方式(JS)
<html>
    <head>
        <title>Kevin's Homepagetitle>
        <style type="text/css">
            a:link, a:visited {//设置访问前访问后超链接格式
                color:#0000ff;//字体颜色
                text-decoration:none;//取消下划线
            }
            a:hover {//设置鼠标悬停格式
                color:#ff8800;
            }
            #newstext {
                width:500px;
            }
        style>
    head>
    <body>
        <script type="text/javascript">
            //定义改变字体的方法
            function changeFont(size) {
                //获取div节点对象
                var oNewsText = document.getElementById("newstext");
                //获取oNewText节点对象的style属性
                oNewText.style.fontSize = size+"px";
            }
        script>

        <h1>标题h1>
        <a href="javascript:void(0)" onclick="changeFont(28)">大字体a>
        <a href="javascript:void(0)" onclick="changeFont(16)">中字体a>
        <a href="javascript:void(0)" onclick="changeFont(8)">小字体a>
        <div id="newstext">
        The Congress meets in the Capitol in Washington, D.C. 
        Both senators and representatives are chosen through
        direct election, though vacancies in the Senate may be
        filled by a gubernatorial appointment. Congress has 535
        voting members: 435 Representatives and 100 Senators.
        div>
    body>
html>

方式二:给标签节点对象设置class属性

方式一缺点

  • 传参过多,阅读性差
  • JS代码和CSS代码耦合性高
  • 不利于扩展

解决方式:把多个所需的样式封装到类选择器中,给指定的标签节点对象加载不同的类即可

<html>
    <head>
        <title>Kevin's Homepagetitle>
        <style type="text/css">
            a:link, a:visited {//设置访问前访问后超链接格式
                color:#0000ff;//字体颜色
                text-decoration:none;//取消下划线
            }
            a:hover {//设置鼠标悬停格式
                color:#ff8800;
            }
            #newstext {
                width:500px;
            }
            //把样式封装到选择器中:类选择器
            .norm {
                color:#00000;
                font-size:16px;
                background-color:#CDD8D0
            }
            .max {
                color:#00000;
                font-size:24px;
                background-color:#CDD8D0
            }
            .min {
                color:#00000;
                font-size:12px;
                background-color:#CDD8D0
            }
        style>
    head>
    <body>
        <script type="text/javascript">
            //把格式封装到选择器中
            function changeFont(selectorName) {
                //获取div节点对象
                var oNewsText = document.getElementById("newstext");
                oNewsText.className = selectorName;
            }
        script>

        <h1>标题h1>
        <a href="javascript:void(28)" onclick="changeFont('max')">大字体a>
        <a href="javascript:void(16)" onclick="changeFont('norm')">中字体a>
        <a href="javascript:void(8)" onclick="changeFont('min')">小字体a>
        <div id="newstext" class="norm">
        The Congress meets in the Capitol in Washington, D.C. 
        Both senators and representatives are chosen through
        direct election, though vacancies in the Senate may be
        filled by a gubernatorial appointment. Congress has 535
        voting members: 435 Representatives and 100 Senators.
        div>
    body>
html>

03-02 示例二:展开闭合列表

思路

  • 标签封装数据 HTML
  • 定义页面样式 CSS
  • 明确事件源,时间,要处理的节点 DOM
  • 明确具体操作方式 JS

方式一:给标签节点对象设置overflow属性

<html>
    <head>
        <title>Kevin's Homepagetitle>
        <style type="text/css">
            dl dd {
                margin:0px;
            }
            dl {
                height:16px;
                overflow:hidden;//只保留16px的内容
            }
        style>
    head>
    <body>
        <script type="text/javascript">
        var flag = true;
            //列表展开闭合效果
            function list() {
                var oDlNode = document.getElementByTag("dl"[0]);
                if(flag) {
                    oDlNode.style.overflow = "visible";
                    flag = false;
                }else{
                    oDlNode.style.overflow = "hidden";
                    flag = true;
                }
            }
        script>

        <dl>
        <dt onclick="list()">显示头目一dt>
        <dd>展开列表内容dd>
        <dd>展开列表内容dd>
        <dd>展开列表内容dd>
        <dd>展开列表内容dd>
        dl>
    body>
html>

方式二:给标签节点对象设置class属性

方式一缺点

  • 传参过多,阅读性差
  • JS代码和CSS代码耦合性高
  • 不利于扩展

解决方式:把多个所需的样式封装到类选择器中,给指定的标签节点对象加载不同的类即可

<html>
    <head>
        <title>Kevin's Homepagetitle>
        <style type="text/css">
            dl dd {
                margin:0px;
            }
            dl {
                height:16px;
                overflow:hidden;//只保留16px的内容
            }
            //预定义类选择器
            .open {
                overflow:visible;
            }
            .close {
                overflow:hidden;
            }
        style>
    head>
    <body>
        <script type="text/javascript">
        var flag = true;
            //列表展开闭合效果
            function list(node) {
                //获取dl节点
                var oDlNode = node.parentNode;
                //var oDlNode = document.getElementByTag("dl"[index]);
                //展开比和切换方式一 flag
                /*
                if(flag) {
                    oDlNode.className = "open";
                    flag = false;
                }else{
                    oDlNode.className = "close";
                    flag = true;
                }
                */
                //展开闭合切换二
                if(oDlNode.className == "close") {
                    oDlNode.className = "open";
                }else{
                    oDlNode.className = "close";
                }
            }
            //一个节点打开,其他节点自动关闭
            function listOne(node) {
                //获取dl节点
                var oDlNode = node.parentNode;
                //获取所有dl节点
                var collDlNodes = document.getElementByTag("dl");
                for (var x = 0; x < collDlNodes.length; x++) {
                    if (oDlNode == collDlNodes[x]) {
                        if(oDlNode.className == "close") {
                            oDlNode.className = "open";
                        }else{
                            oDlNode.className = "close";
                        }
                    } else {
                        collDlNodes[x].className = "close";
                    }
                }
            }
        script>
        <dl class="close">
            <dt onclick="list(this)">显示头目一dt>
            <dd>展开列表内容dd>
            <dd>展开列表内容dd>
            <dd>展开列表内容dd>
            <dd>展开列表内容dd>
        dl>
        <dl class="close">
            <dt onclick="list(this)">显示头目一dt>
            <dd>展开列表内容dd>
            <dd>展开列表内容dd>
            <dd>展开列表内容dd>
            <dd>展开列表内容dd>
        dl>
        <dl class="close">
            <dt onclick="list(this)">显示头目一dt>
            <dd>展开列表内容dd>
            <dd>展开列表内容dd>
            <dd>展开列表内容dd>
            <dd>展开列表内容dd>
        dl>
    body>
html>

03-03 示例三:好友列表

<html>
    <head>
        <title>Kevin's Homepagetitle>
        <style type="text/css">
            table ul { //表格中的ul样式定义
                list-style:none;//取消无序列表样式
                margin:0px;//取消外边距
                display:none;//不显示
            }
            table {
                border:#0000ff 1px splid;
                width:80px;
            }
            table td {
                border:#0000ff 1px solid;
            }
            table td a:link, table td a:visited {//超链接格式设置
                color:#FF0000;
                text-decoration:none;
            }
            .open {
                display:block;
            }
            .close {
                display:open;
            }
        style>
    head>
    <body>
        <script type="text/javascript">
            function list(node) {
                //获取被操作的节点ul
                var oTdNode = node.parentNode
                var oUlNode = oTdNode.getElementsByTagName("ul")[0];
                //获取所有的ul
                var oTabNode = document.getElementById("goodlist");
                var collUlNodes = oTabNode.getElementsByTagName("ul");
                for(var x=0; xif(collUlNodes[x]==oUlNode){
                        if(oUlNode.className == "open"){
                            oUlNode.className = "close";
                        }else{
                            oUlNode.className = "open";
                        }
                    }else{
                        collUlNodes[x].className = "close";
                    }
                }
            }
        script>
        <table id="goodlist">
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list(this)">好友菜单a>
                    <ul>
                        <li>一个好友li>
                        <li>一个好友li>
                        <li>一个好友li>
                    ul>
                td>
            tr>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list(this)">好友菜单a>
                    <ul>
                        <li>一个好友li>
                        <li>一个好友li>
                        <li>一个好友li>
                    ul>
                td>
            tr>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list(this)">好友菜单a>
                    <ul>
                        <li>一个好友li>
                        <li>一个好友li>
                        <li>一个好友li>
                    ul>
                td>
            tr>
        table>
    body>
html>

03-04 示例四:创建表格

table.css文件

table

思路

  • 事件源:一个按钮
  • 必须有一个生成的表格节点存储位置

方法一

<html>
    <head>
        <title>Kevin's Homepagetitle>
        <style type="text/css">
            @import url(table.css);
        style>
    head>
    <body>
        <script type="text/javascript">
            function creTable() {
                //创建表格节点
                var oTabNode = document.createElement("table");
                //创建TBody节点
                var oTbdNode = document.createElement("tbody");
                //创建行节点
                var oTrNode = document.createElement("tr");
                //创建单元格节点
                var oTdNode = document.createElement("td");
                oTdNode.innerHTML = "这是一个单元格";
                //连接四个节点
                oTrNode.appendNode(oTdNode);
                oTbdNode.appendNode(oTrNode);
                oTabNode.appendNode(oTbdNode);
                document.getElementsByTagName("div")[0].appendChild(oTabNode);
            }
        script>

        <input type="button" value="创建表格" onclick="creTable()" />
        <hr />
        <div>div>
    body>
html>

方法二

用表格节点对象的方法来实现

table对象常用方法

  • insertRow() 插入行
  • insertCell() 插入单元格
<html>
    <head>
        <title>Kevin's Homepagetitle>
        <style type="text/css">
            @import url(table.css);
        style>
    head>
    <body>
        <script type="text/javascript">
            function creTable() {
                //创建表格节点
                var oTabNode = document.createElement("table");

                //oTabNode.id = "tabid";
                oTabNode.setAttribute("id","tabid");

                var rowVal = parseInt(document.getElementsByName("rownum")[0].value);
                var colVal = parseInt(document.getElementsByName("colnum")[0].value);
                for(var x = 1; x <= rowVal; x++) {
                    var oTrNode = oTabNode.insertRow();//插入行
                    for(var y = 1; y <= colVal; y++) {
                        var oTdNode = oTrNode.insertCell();//插入单元格
                        oTdNode.innerHTML = x+"--"+y;
                    }
                }
                document.getElementsByTagName("div")[0].appendChild(oTabNode);
                //只能创建一次
                document.getElementsByName("crtbut")[0].disabled = true;

                //删除行
                function delRow() {
                    //获取表格对象
                    var oTabNode = document.getElementById("tabid");
                    if(oTabNode==null) {
                        alert("表格不存在");
                        return;
                    }
                    //获取要删除的表格行数
                    var rowVal = document.getElementsByName("delrow")[0].value;
                    if (rowVal>=1 && rowVal <= oTabNode.rows.length) {
                        oTabNode.deleteRow(rowVal-1);
                    } else {
                        alert("要删除的行不存在");
                    }
                }
                //删除列:删除每一行同一位置的单元格
                function delCol() {
                    //获取表格
                    var oTabNode = document.getElementById("tabid");
                    //判断表格是否存在
                    if(oTabNode==null) {
                        alert("表格不存在");
                        return;
                    }
                    var colVal = document.getElementsByName("delcol")[0].value;
                    if (colVal>=1 && colVal <= oTabNode.rows[0].cells.length) {
                        for (var x = 0; x < oTabNode.rows.length; x++) {
                        oTabNode.wors[x].deleteCell(colVal-1);
                        }
                    } else {
                        alert("要删除的列不存在");
                    }
                }
            }
        script>

        <input type="text" name="rownum" />行数
        <input type="text" name="colnum" />列数

        <input type="button" value="创建表格" name="crtbut" onclick="creTable()" />

        <input type="text" name="delrow" /> 
        <input type="button" value="删除行" onclick="delRow()" />
        <input type="text" name="delcol" /> 
        <input type="button" value="删除列" onclick="delCol()" />
        <hr />
        <div>div>
    body>
html>

03-05 示例五:行颜色间隔显示并高亮

“`


Kevin’s Homepage

.one {
background-color:#AEEEEE;
}
.two {
background-color:#EEEE00;
}
.over {
background-color:#8deffa
}


function trColor() {
var oTabNode = document.getElementById("info");
var collTrNodes = oTabNode.rows;
for (var x = 1; x < collTrNodes.length; x++) {
if(x%2==1) {
collTrNodes[x].className = "one";
} else {
collTrNodes[x].className = "two";
}
//给每一个行对象添加两个事件
collTrNodes[x].onmouseover = function() {
name = this.className;
this.className ="over";
}
collTrNodes[x].onmouseout = function() {
this.className = name;
}
}
}
onload = function() {
trcolor();
}
/*
var name;
function over(node) {
var name = node.className;
node.className = "over";
}
function outa(node) {
node.className = name;
}
*/
























Name Age Address
Steve 29 LA
Tony 31 NY
Seb 28 RU


表格排序

思路:
- 需要数组存储需要参与排序的行对象
- 对行数组中的每一个行的年龄单元格数据比较,并再数组中置换
- 把排序后的数组重新添加回表格
 ```
<html>
    <head>
        <title>Kevin's Homepagetitle>
        <style type="text/css">
            th a:link, th a:visited {
                color:#279bda;
                text-decoration:none;
            }
        style>
        <script type="text/javascript">
            function sortTable() {
                var oTabNode = document。getElementById("info");
                var collTrNodes = oTabNode.rows;
                //定义一个临时容器,存储需要排序的行对象
                var trArr = [];
                //遍历原行集合,并将需要排序的行对象存储到数组中
                for (var x = 1; x < collTrNodes.length; x++) {
                    trArr[x-1] =collTrNodes[x];
                }
                //对临时容器排序
                mySort(trArr);
                //把排完序的行对象添加回表格
                for(var x = 0; x < trArr.length; x++) {
                    trArr[x].parentNode.appendChile(trArr[x]);
                }
            }
            function mySort(arr) {
                for(var x = 0; x < arr.length-1; x++) {
                    for(var y = x+1; y < arr.length; y++) {
                        if(arr[x].cells[1].innerHTML > arr[y].cell[1].innerHTML) {
                            arr[x].swapNode(arr[y]);
                        }
                    }
                }
            }
        script>
    head>
    <body>
        <table id="info">
            <tr>
                <th>Nameth>
                <th><a href="javascript:void(0) onclick="sortTable()">Agea>th>
                <th>Addressth>
            tr>
            <tr>
                <td>Stevetd>
                <td>29td>
                <td>LAtd>
            tr>
            <tr>
                <td>Tonytd>
                <td>31td>
                <td>NYtd>
            tr>
            <tr>
                <td>Sebtd>
                <td>28td>
                <td>RUtd>
            tr>
        table>
    body>
html>

03-06 示例六:全选商品

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Untitled Documenttitle>
    head>
    <body>
        <script type="text/javascript">
            function getSum(){

                /*
                 * 获取所有的名称为item的复选框。
                 * 判断checked状态,为true表示被选中,获取该节点的value进行累加。
                 */
                var sum = 0;
                var collItemNodes = document.getElementsByName("item");

                for(var x=0; xif(collItemNodes[x].checked){
                        sum += parseInt(collItemNodes[x].value);
                    }
                }

                var sSum = sum+"元";
                document.getElementById("sumid").innerHTML = sSum.fontcolor('red');
            }

            //全选。
            function checkAll(node){
                /*
                 * 将全选的box的checked状态赋值给所有的itembox的checked。
                 */
                var collItemNodes = document.getElementsByName("item");
                for(var x=0; xscript>
        <input type="checkbox" name="allitem" onclick="checkAll(this)" />全选<br/>
        <input type="checkbox" name="item" value="4000" />笔记本电脑:4000元<br/>
        <input type="checkbox" name="item" value="4000" />笔记本电脑:4000元<br/>
        <input type="checkbox" name="item" value="4000" />笔记本电脑:4000元<br/>
        <input type="checkbox" name="item" value="4000" />笔记本电脑:4000元<br/>
        <input type="checkbox" name="item" value="4000" />笔记本电脑:4000元<br/>
        <input type="checkbox" name="item" value="4000" />笔记本电脑:4000元<br/>
        <input type="checkbox" name="item" value="4000" />笔记本电脑:4000元<br/>
        <input type="checkbox" name="item" value="4000" />笔记本电脑:4000元<br/>
        <input type="checkbox" name="allitem" onclick="checkAll(this)"  />全选<br/>
        <input type="button" value="总金额是" onclick="getSum()"/><span id="sumid">span>
    body>
html>

03-07 示例七:邮件系统

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Documenttitle>
        <link rel="stylesheet" type="text/css" href="table.css"/>

        <style type="text/css">
            .one{
                background-color:#9bf7d5;
            }
            .two{
                background-color:#f3e99a;
            }
            .over{
                background-color:#ef7125;
            }
        style>

        <script type="text/javascript">
            //行颜色间隔显示
            var name;
            function trColor(){
                //1,获取表格对象
                var oTabNode = document.getElementById("mailtable");

                //2,获取行对象
                var collTrNodes = oTabNode.rows;

                //3,对所有需要设置背景的行对象进行遍历
                for(var x=1; x1;x++){
                    if(x%2==1){
                        collTrNodes[x].className = "one";
                    }else{
                        collTrNodes[x].className = "two";
                    }
                    collTrNodes[x].onmouseover = function(){
                        name = this.className;
                        this.className = "over";
                    }
                    collTrNodes[x].onmouseout = function(){
                        this.className = name;
                    }
                }
            }
            onload = function(){
                trColor();
            }
            //复选框的全选动作
            function checkAll(node){

                //获取所有的mail复选框
                var collMailNodes = document.getElementsByName("mail");

                for(var x=0; x//定义用按钮完成复选的方法
            function checkAllByBut(num){

                var collMailNodes = document.getElementsByName("mail");

                for(var x=0; xif(num>1)
                        collMailNodes[x].checked = !collMailNodes[x].checked;
                    else
                        collMailNodes[x].checked = num;
                }

            }
            //删除所选邮件
            function deleteMail(){

                if (!confirm("Really want to delete?"))
                    return;
                } 

                //获取所有mail节点
                var collMailNodes = document.getElementsByName("mail");

                for (var x = 0; x < collMailNodes.length; x++) {

                    if (collMailNodes[x].checked) {

                        var oTrNode = collMailNodes[x].parentNode.parentNode;
                        oTrNode.parentNode.removeChild(oTrNode);
                        x--;
                    }                   
                }

                trColor();
            }
        script>
    head>
    <body>
    <table id="mailtable">
    <tr>
        <th>
            <input type="checkbox" name="all" onclick="checkAll(this)"  />All
        th>
        <th>
                Sender
        th>
        <th>
            E-mail Name
        th>
        <th>
            Description
        th>
    tr>

    <tr>
        <td>
            <input type="checkbox" name="mail" />
        td>
        <td>
            123
        td>
        <td>
            345
        td>
        <td>
            567
        td>
    tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        td>
        <td>
            789
        td>
        <td>
            901
        td>
        <td>
            123
        td>
    tr>
    <tr>
        <td>
            <input type="checkbox" name="mail" />
        td>
        <td>
            345
        td>
        <td>
            567
        td>
        <td>
            789
        td>
    tr>
    <tr>
        <th>
            <input type="checkbox" name="all" onclick="checkAll(this)"  />All
        th>
        <th colspan="3">
            <input type="button" value="All" onclick="checkAllByBut(1)" />
            <input type="button" value="Cancel All" onclick="checkAllByBut(0)"  />
            <input type="button" value="Reverse All" onclick="checkAllByBut(2)"  />
            <input type="button" value="Deleted Selected" onclick="deleteMail()" />
        th>
    tr>
table>
    body>
html>

03-08 示例八:单选按钮

单选按钮演示:

  • 调查问卷
  • 性格测试
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Untitled Documenttitle>
        <style type="text/css">
            #contentid{
                display:none;
            }
            #no1ul{
                list-style:none;
                margin:0px;
            }
            .close{
                display:none;
            }
            .open{
                display:block;
            }
        style>
        <script type="text/javascript">
            function showResult(){
                //1,判断是否有答案被选中
                //判断所有no1的radio,判断checked状态
                var oNo1Nodes = document.getElementsByName("no1");
                var flag = false;
                var val;
                for(var x=0; xif(oNo1Nodes[x].checked){
                        flag = true;

                        val = oNo1Nodes[x].value;
                        break;
                    }
                }
                if(!flag){
//                  alert("")
                    document.getElementById("errinfo").innerHTML = "还没选择答案".fontcolor("red");
                    return;
                }
                if(val>=1 && val<=3){
                    document.getElementById("res_1").className = "open";
                    document.getElementById("res_2").className = "close";
                }
                else{
                    document.getElementById("res_1").className = "close";
                    document.getElementById("res_2").className = "open";
                }
            }
        script>
    head>
    <body>
                <h2>性格测试h2>
                <div>
                    <h3>第一题h3>
                    <span>你喜欢什么水果呀span>
                    <ul id="no1ul">
                    <li><input type="radio" name="no1" value="1" />葡萄/li>
                    <li><input type="radio" name="no1" value="2" />西瓜li>
                    <li><input type="radio" name="no1" value="3" />芒果li>
                    <li><input type="radio" name="no1" value="4" />苹果li>
                    <li><input type="radio" name="no1" value="5" />樱桃li>
                    ul>
                div>
                <div>
                <input type="button" value="查看测试结果" onclick="showResult()" />
                <span id="errinfo">span>
                <div id="res_1" class="close">1-3分结果..div>
                <div id="res_2" class="close">4分结果...div>
                div>
    <hr/>
        <script type="text/javascript">
            function showContent(node){
                var oDivNode = document.getElementById("contentid");
                with(oDivNode.style){
                    if(node.value=='yes'){
                        display = "block";
                    }else{
                        display = "none";
                    }
                }
            }
        script>
        
        <div>
        您要参加问卷调查吗
        <input type="radio" name="wenjuan" value="yes" onclick="showContent(this)" /><input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)" />div>
        <div id="contentid">
        问卷调查内容<BR/>
        您的姓名<input type="text" /><br>
        您的邮箱<input type="text" />
        div>
    body>
html>

03-09 示例九:下拉菜单

选择颜色

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Untitled Documenttitle>
        <style tyle="text/css">
            .clrclass{
                height:50px;
                width:50px;
                float:left;
                margin-right:30px;
            }
            #text{
                clear:left;
                margin-top:20px;
            }
            .selClass{
                width:100px;
            }
        style>
    head>
    <body>
        <script type="text/javascript">
            function changeColor(node){
                var colorVal = node.style.backgroundColor;
                document.getElementById("text").style.color = colorVal;
            }
        script>
        <div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)">div>
        <div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)">div>
        <div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)">div>
        <div id="text">
            需要显示效果的文字<br/>
            需要显示效果的文字<br/>
            需要显示效果的文字<br/>
            需要显示效果的文字<br/>
            需要显示效果的文字<br/>
        div>
        <hr/>
        <script type="text/javascript">
            function changeColor2(){
                var oSelectNode = document.getElementsByName("selectColor")[0];
                //获取所有的option
                /*with (oSelectNode) {
                    var collOptionNodes = options;
                    alert(options[selectedIndex].innerHTML);
                }*/
                var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;
                document.getElementById("text").style.color = colorVal;

//              for(var x=0;x
//                  alert(collOptionNodes[x].innerHTML);
//              }
            }
        script>
        <select name="selectColor" onchange="changeColor2()">
            <option value="black">选择颜色option>
            <option value="red">红色option>
            <option value="green">绿色option>
            <option value="blue">蓝色option>
        select>
        <select name="selectColor2" onchange="changeColor3()" class="selClass">
            <option style="background-color:black" value="black">选择颜色option>
            <option style="background-color:red" value="red">红色option>
            <option style="background-color:green"  value="green">绿色option>
            <option style="background-color:blue" value="blue">蓝色option>
        select>
    body>
html>

选择城市

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Untitled Documenttitle>
        <style type="text/css">
            select{
                width:100px;
            }
        style>
    head>
    <body>
        <script type="text/javascript">
            function selectCity(){
                var  collCities = [['选择城市'],['盐城','南京','徐州','无锡'],
                                                ['武汉','黄冈'],
                                                ['济南','青岛','烟台']];
//              var arr = {"jiangsu":['盐城','南京','徐州','无锡']};
                //获取两个下拉菜单对象
                var oSelNode = document.getElementById("selid");
                var oSubSelNode = document.getElementById("subselid");
                //获取选择的省得角标
                var index = oSelNode.selectedIndex;
                //通过角标获取对应城市数组
                var arrCities = collCities[index];
                //把子菜单中的内容清空一下
//              for(var x=0;x
//                  oSubSelNode.removeChild(oSubSelNode.options[x]);
//              }
                //清除动作
                oSubSelNode.length = 0;
                //遍历数组,吧数组的元素封装成option对象,添加到子菜单中
                for(var x=0; xvar oOptNode = document.createElement("option");
                    oOptNode.innerHTML = arrCities[x];

                    oSubSelNode.appendChild(oOptNode);
                }
            }
        script>
        <select id="selid" onchange="selectCity()">
            <option>选择省市option>
            <option value="jiangsu">江苏option>
            <option>湖北option>
            <option>山东option>
        select>
        <select id="subselid">
            <option>选择城市option>
        select>
    body>
html>

03-10 示例十:附件

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Untitled Documenttitle>
        <style type="text/css">
            table a:link,table a:visited{
                color:#179ed9;
                text-decoration:none;
            }
            table a:hover{
                color:#f36021;
            }
        style>
        <script type="text/javascript">
            function addFile(){
                                //获取表格节点对象
                var oTabNode = document.getElementById("fileid");
                //创建行
                var oTrNode = oTabNode.insertRow();
                //创建列
                var oTdNode_file = oTrNode.insertCell();
                var oTdNode_del = oTrNode.insertCell();

                //第一个单元格放文件提交表单
                oTdNode_file.innerHTML = "";
                //第二个单元格放删除按钮
//              oTdNode_del.innerHTML  = "删除附件";
                oTdNode_del.innerHTML = "删除附件";
            }
            function deleteFile(node){
                var oTrNode = node.parentNode.parentNode;
                oTrNode.parentNode.removeChild(oTrNode);
            }
        script>
    head>
    <body>
        <table id="fileid">
            <tr>
                <td><a href="javascript:void(0)" onclick="addFile()">添加文件a>td>
            tr>
            
        table>
    body>
html>

你可能感兴趣的:(<,笔记,>,DOM)