HTML 5_CSS 3_JavaScript讲义（十二）- D

作者: android小菜鸡一枚 | 来源:发表于2017-12-20 14:25 被阅读0次

（1）访问HTML元素

1.1 根据ID访问HTML元素

document.getElementById(idVal)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 根据ID访问HTML元素 </title>
    <script type="text/javascript">
        var accessById = function()
        {
            alert(document.getElementById("a").innerHTML + "\n"
            + document.getElementById("b").value);
        }
    </script>
    </head>
<body>
    <div id="a">疯狂Java讲义</div>
    <textarea id="b" rows="3" cols='25'>轻量级Java EE企业应用实战
        </textarea>
    <input type="button" value="访问2个元素" onclick="accessById();"/>
</body>
</html>

根据ID访问HTML元素

1.2 利用节点关系访问HTML元素

parentNode 当前节点的父节点
previous 当前节点的前一个兄弟节点
nextSibling 当前节点的后一个兄弟节点
childNodes 当前节点的所有子节点
getElementsByTagName(tagName) 当前节点的具有指定标签名的所有子节点
firstChild 当前节点的第一个子节点
lastChild 当前节点的最后一个子节点

对于HTML页面而言，浏览器会将页面中的“空白” 也当成文本节点

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 根据节点关系访问HTML元素 </title>
    <style type="text/css">
        /* 定义改变背景色的CSS，表示被选中的项 */
        .selected {
            background-color:#66f
        }
    </style>
    </head>
    <body>
    <ol id="books">
        <li id="java">疯狂Java讲义</li>
        <li id="ssh">轻量级Java EE企业应用实战</li>
        <li id="ajax" class="selected">疯狂Ajax讲义</li>
        <li id="xml">疯狂XML讲义</li>
        <li id="ejb">经典Java EE企业应用实战</li>
        <li id="workflow">疯狂Android讲义</li>
    </ol>
    <input type="button" value="父节点"
        onclick="change(curTarget.parentNode);"/>
    <input type="button" value="第一个"
        onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
    <input type="button" value="上一个"
        onclick="change(curTarget.previousSibling.previousSibling);"/>
    <input type="button" value="下一个"
        onclick="change(curTarget.nextSibling.nextSibling);"/>
    <input type="button" value="最后一个"
        onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
    <script type="text/javascript">
        var curTarget = document.getElementById("ajax");
        var change = function(target)
        {
            alert(target.innerHTML);
        }
    </script>
</body>
</html>

image.png

1.3 访问表单控件

HTMLFormElement 访问表单控件有如下三种方法：

formObj.elements[index] : 返回表单中第index个表单控件
formObj.elements['elementName'] : 返回表单中id或name为elementName的表单控件
formObj.elementName: 返回表单中id或name为elementName的表单控件

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 访问表单控件 </title>
</head>
<body>
    <form id="d" action="" method="get">
        <input name="user" type="text" /><br />
        <input name="pass" type="text" /><br />
        <select name="color">
            <option value="red">红色</option>
            <option value="blue">蓝色</option>
        </select><br />
        <input type="button" value="第一个" onclick=
            "alert(document.getElementById('d').elements[0].value);" />
        <input type="button" value="第二个" onclick=
            "alert(document.getElementById('d').elements['pass'].value);" />
        <input type="button" value="第三个"    onclick=
            "alert(document.getElementById('d').color.value);" />
    </form>
</body>
</html>

访问表单控件

1.4 访问列表框，下拉菜单的选项

select.options[index] 访问列表框，下拉菜单的第index+1个选项

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 访问列表项 </title>
</head>
<body>
    <select id="mySelect" name="mySelect" size="6">
        <option value="java">疯狂Java讲义</option>
        <option value="ssh">轻量级Java EE企业应用实战</option>
        <option value="ajax" selected>疯狂Ajax讲义</option>
        <option value="xml">疯狂XML讲义</option>
        <option value="ejb">经典Java EE企业应用实战</option>
        <option value="workflow">疯狂Android讲义</option>
    </select><br />
    <input type="button" value="第一个" onclick=
        "change(curTarget.options[0]);" />
    <input type="button" value="上一个"    onclick=
        "change(curTarget.options[curTarget.selectedIndex - 1]);" />
    <input type="button" value="下一个" onclick=
        "change(curTarget.options[curTarget.selectedIndex + 1]);" />
    <input type="button" value="最后一个" onclick=
        "change(curTarget.options[curTarget.length - 1]);" />
    <script type="text/javascript">
        var curTarget = document.getElementById("mySelect");
        var change = function(target)
        {
            alert(target.text);
        }
    </script>
</body>
</html>

1.5 访问表格子元素

caption 表格的标题对象
HTMLCollection rows 表格里的所有表格行

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 访问表格元素 </title>
</head>
<body>
    <table id="d" border="1">
    <caption>疯狂Java体系</caption>
        <tr>
            <td>疯狂Java讲义</td>
            <td>轻量级Java EE企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂Ajax讲义</td>
            <td>经典Java EE企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂XML讲义</td>
            <td>疯狂Android讲义</td>
        </tr>
    </table>
    <input type="button" value="表格标题" onclick=
        "alert(document.getElementById('d').caption.innerHTML);" />
    <input type="button" value="第一行、第一格" onclick=
        "alert(document.getElementById('d').rows[0].cells[0].innerHTML);" />
    <input type="button" value="第二行、第二格" onclick=
        "alert(document.getElementById('d').rows[1].cells[1].innerHTML);" />
    <input type="button" value="第三行、第二格" onclick=
        "alert(document.getElementById('d').rows[2].cells[1].innerHTML);" />
</body>
</html>

访问表格子元素

（2）修改HTML元素

innerHTML 大部分HTML页面元素如<div>,<td>的呈现内容
value 表单控件如<input>,<textarea>的呈现内容
className
style
options[index]

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 编辑表格值 </title>
</head>
<body>
    改变第<input id="row" type="text" size="2" />行，
    第<input id="cel" type="text" size="2" />列的值为:
    <input id="celVal" type="text" size="16" /><br />
    <input id="chg" type="button" value="改变" onclick="change();" />
    <table id="d" border="1">
        <tr>
            <td>疯狂Java讲义</td>
            <td>轻量级Java EE企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂Ajax讲义</td>
            <td>经典Java EE企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂XML讲义</td>
            <td>疯狂Android讲义</td>
        </tr>
    </table>
    <script type="text/javascript">
        var change = function()
        {
            var tb = document.getElementById("d");
            var row = document.getElementById("row").value ;
            row = parseInt(row);
            // 如果需要修改的行不是整数，弹出警告
            if(isNaN(row))
            {
                alert("您要修改的行必须是整数");
                return false;
            }
            var cel = document.getElementById("cel").value ;
            cel = parseInt(cel);
            // 如果需要修改的列不是整数，弹出警告 
            if(isNaN(cel))
            {
                alert("您要修改的列必须是整数");
                return false;
            }
            // 如果需要修改的行或者列超出了表格的行或列，弹出警告
            if (row > tb.rows.length || 
                cel > tb.rows.item(0).cells.length)
            {
                alert("要修改的单元格不在该表格内");
                return false;
            }
            //  修改单元格的值
            tb.rows.item(row - 1).cells.item(cel - 1).innerHTML
                = document.getElementById("celVal").value;
        }
    </script>
</body>
</html>

编辑表格第一行第一列的值

（3）增加HTML 元素

3.1 创建或复制节点

document.createElement(Tag) 创建Tag标签对应的节点

<script type="text/javascript">
    // 创建一个新节点
    var a = document.createElement("div");
    // 使用警告对话框输出节点
    alert(a);
</script>

image.png

Node cloneNode(boolean deep) 复制当前节点。当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点；当deep为false时，表示仅复制当前节点

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 复制节点 </title>
</head>
<body>
    <ul id = "d">
        <li>疯狂Java讲义</li>
    </ul>
    <script type="text/javascript">
        // 获取ID为d的节点
        var ul = document.getElementById("d");
        // 复制ul的第二个子节点（不复制当前节点的后代节点）
        var ajax = ul.firstChild.nextSibling.cloneNode(false);
        // 修改被复制的节点
        ajax.innerHTML = "疯狂Ajax讲义";
        // 将复制的节点添加到页面中
        ul.appendChild(ajax);
    </script>
</body>
</html>

image.png

3.2 添加节点

appendChild(Node newNode) 将newNode添加成当前节点的最后一个子节点
insertBefore(Node newNode,Node refNode) 在refNode节点之前插入newNode节点
replaceChild(Node newChild,Node oldChild) 将oldChild节点替换成newChild节点

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 复制节点 </title>
</head>
<body>
    <ul id = "d">
        <li>疯狂Java讲义</li>
    </ul>
    <script type="text/javascript">
        // 获取ID为d的节点
        var ul = document.getElementById("d");
        // 复制ul的第二个子节点（不复制当前节点的后代节点）
        var ajax = ul.firstChild.nextSibling.cloneNode(false);
        // 修改被复制的节点
        ajax.innerHTML = "疯狂Ajax讲义";
        // 将复制的节点添加到页面中
        ul.insertBefore(ajax , ul.firstChild);
    </script>
</body>
</html>

image.png

3.3 为列表框，下拉菜单添加选项

add(HTMLOptionElement option,HTMLOptionElement before) 在before选项之前添加option选项。如果option选项添加在最后，则将before指定为null即可

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加选项 </title>
</head>
<body id="test">
    <script type="text/javascript">
        // 创建<select.../>对象
        var a = document.createElement("select");
        // 为<select.../>对象增加10个选项
        for (var i = 0 ; i < 10 ; i++)
        {
            // 创建一个<option.../>元素
            var op = document.createElement("option");
            op.innerHTML = '新增的选项' + i;
            // 将新的选项添加到列表框的最后
            a.add(op , null);
        }
        // 设置列表框高度为5
        a.size = 5;
        // 将列表框增加成body元素的子节点
        document.getElementById("test").appendChild(a);
    </script>
</body>
</html>

image.png

使用Option构造器
new Option(text,value,defaultSelected,selected)

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加选项 </title>
</head>
<body id="test">
    <script type="text/javascript">
        // 创建<select.../>对象
        var a = document.createElement("select");
        // 为<select.../>对象增加10个选项
        for (var i = 0 ; i < 10 ; i++)
        {
            // 创建一个<option.../>元素
            var op = new Option('新增的选项' + i , i);
            // 直接为指定选项赋值
            a.options[i] = op;
        }
        // 设置列表框高度为5
        a.size = 5;
        // 将列表框增加成body元素的子节点
        document.getElementById("test").appendChild(a);
    </script>
</body>
</html>

image.png

3.4 动态添加表格内容

insertRow(index) 在index处插入一行
createCaption() 为表格创建标题
createTFoot()
createTHead()
insertCell(long index) 在index处创建一个单元格

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 添加表格 </title>
</head>
<body id="test">
    <script type="text/javascript">
        // 创建一个表格对象
        var a = document.createElement("table");
        // 设置表格的边框为1
        a.border=1;
        var caption = a.createCaption();
        caption.innerHTML = "表格标题";
        // 为表格循环插入5行
        for (var i = 0 ; i < 5 ; i++)
        {
            // 插入行
            var tr = a.insertRow(i);
            // 为每行循环插入7列
            for (var j = 0 ; j < 7 ; j++)
            {
                // 循环插入7列
                var td = tr.insertCell(j);
                // 设置每个单元格的内容
                td.innerHTML = "单元格内容 " + i + j;
            }
        }
        //将表格元素添加到HTML文档内
        document.getElementById("test").appendChild(a);
    </script>
</body>
</html>

image.png

（4）删除HTML元素

4.1 删除节点

removeChild(oldNode) 删除oldNode子节点

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 删除子节点 </title>
</head>
<body id="test">
    <input id="add" type="button" value="增加" disabled
        onclick="add();"/>
    <input id="del" type="button" value="删除" 
        onclick="del();"/>
    <div id="target" style="width:240px; height:50px;
        border:1px solid black">被控制的目标元素
    </div>
    <script type="text/javascript">
        //获取body元素
        var body = document.getElementById("test");
        //获取被控制的目标元素
        var target = document.getElementById("target");
        var add = function()
        {
            // 添加目标元素
            body.appendChild(target);
            document.getElementById("add").disabled = "disabled";
            document.getElementById("del").disabled = "";
        }
        var del = function()
        {
            // 删除目标元素
            body.removeChild(target);
            document.getElementById("del").disabled = "disabled";
            document.getElementById("add").disabled = "";
        }
    </script>
</body>
</html>

image.png

4.2 删除列表框，下拉菜单的选项

remove（long index）删除指定索引处的选项

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 删除列表项 </title>
</head>
<body>
    <input id="opValue" type="text"/>
    <input id="add" type="button" value="增加"
        onclick="add();"/>
    <input id="del" type="button" value="删除"
        onclick="del();"/><br />
    <select id="show" size="8" style="width:120px;">
    </select>
    <script type="text/javascript">
        var show = document.getElementById("show");
        // 增加下拉列表选项的函数
        var add = function()
        {
            // 以文本框的值创建一个<option.../>元素
            var op = new Option(document
                .getElementById('opValue').value);
            //增加选项
            show.options[show.options.length] = op;
        }
        var del = function()
        {
            // 如果有选项
            if(show.options.length > 0)
            {
                // 删除最后的一个选项
                show.remove(show.options.length - 1);
            }
        }
    </script>
</body>
</html>

或直接将指定选项赋值且null也可删除该选项

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 删除列表项 </title>
</head>
<body>
    <input id="opValue" type="text"/>
    <input id="add" type="button" value="增加"
        onclick="add();"/>
    <input id="del" type="button" value="删除"
        onclick="del();"/><br />
    <select id="show" size="8" style="width:120px;">
    </select>
    <script type="text/javascript">
        var show = document.getElementById("show");
        // 增加下拉列表选项的函数
        var add = function()
        {
            // 以文本框的值创建一个<option.../>元素
            var op = new Option(document
                .getElementById('opValue').value);
            //增加选项
            show.options[show.options.length] = op;
        }
        var del = function()
        {
            // 如果有选项
            if (show.options.length > 0)
            {
                // 删除最后的一个选项
                show.options[show.options.length - 1] = null;
            }
        }
    </script>
</body>
</html>

image.png

4.3 删除表格的行或单元格

deleteRow(long index) 删除表格中index索引处的行
deleteCell(long index) 删除某行index索引处的单元格

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 删除表格的行和格 </title>
</head>
<body>
<input id="delrow" type="button" value="删除表格最后一行"
    onclick="delrow();" /><br />
<input id="delcell" type="button" value="删除最后一行的最后一格"
    onclick="delcell();" /><br />
    <table id="test" border="1" style="width:400px;">
        <caption>疯狂Java体系</caption>
        <tr>
            <td>疯狂Java讲义</td>
            <td>轻量级Java EE企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂Ajax讲义</td>
            <td>经典Java EE企业应用实战</td>
        </tr>
        <tr>
            <td>疯狂XML讲义</td>
            <td>疯狂Android讲义</td>
        </tr>
    </table>
    <script type="text/javascript">
        // 获取目标表格
        var tab = document.getElementById("test");
        // 删除行的函数
        var delrow = function()
        {
            if (tab.rows.length > 0)
            {
                // 删除最后一行
                tab.deleteRow(tab.rows.length - 1); 
            }
        }
        // 删除目标表格的最后一格
        var delcell = function()
        {
            // 获取表格的所有行
            var rowList = tab.rows;
            // 获取表格的最后一行
            var lastRow = rowList.item(rowList.length - 1);
            if(lastRow.cells.length > 0)
            {
                // 删除表格的最后一格
                lastRow.deleteCell(lastRow.cells.length - 1);
            }
        }
    </script>
</body>
</html>

image.png

HTML 5_CSS 3_JavaScript讲义（十二）- D

（1）访问HTML元素

1.1 根据ID访问HTML元素

1.2 利用节点关系访问HTML元素

1.3 访问表单控件

1.4 访问列表框，下拉菜单的选项

1.5 访问表格子元素

（2）修改HTML元素

（3）增加HTML 元素

3.1 创建或复制节点

3.2 添加节点

3.3 为列表框，下拉菜单添加选项

3.4 动态添加表格内容

（4）删除HTML元素

4.1 删除节点

4.2 删除列表框，下拉菜单的选项

4.3 删除表格的行或单元格

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

HTML 5_CSS 3_JavaScript讲义（十二）- D

（1） 访问HTML元素

1.1 根据ID访问HTML元素

1.2 利用节点关系访问HTML元素

1.3 访问表单控件

1.4 访问列表框，下拉菜单的选项

1.5 访问表格子元素

（2） 修改HTML元素

（3） 增加HTML 元素

3.1 创建或复制节点

3.2 添加节点

3.3 为列表框，下拉菜单添加选项

3.4 动态添加表格内容

（4） 删除HTML元素

4.1 删除节点

4.2 删除列表框，下拉菜单的选项

4.3 删除表格的行或单元格

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

（1）访问HTML元素

（2）修改HTML元素

（3）增加HTML 元素

（4）删除HTML元素