19.BOM&DOM-动态操作节点

来源：互联网发布：数据分析是做什么的编辑：程序博客网时间：2024/05/21 05:59
<!DOCTYPE html><html>    <!--        动态操作节点        对于DOM，我们想做的事情无非就是编程动态的去操作它        这里呢，Element，Attribute有很多方法，这里只是一些常用的        对于获取节点:            parentNode()        获取当前节点的父节点            childNodes()        获取当前节点的子节点，返回一个数组            firstChild()        获取当前节点的第一个子节点            lastChild()         获取当前节点的最后一个子节点            nextSibling()       获取当前节点的下一个兄弟节点            previousSibling()   获取当前节点的下一个兄弟节点        对于操作节点：            createElement()     创建一个节点            createTextNode()    创建一个文本及诶单            appendChild()       在当前节点中追加一个子节点            replaceChile(index) 按照索引替换子节点            replaceNode()       替换节点                removeChild()       移除指定节点            removeNode()        移除当前节点        对于读写节点属性：            setAttribute()      设置当前元素的特定属性            getAttribute()      获取当前元素的特定属性            removeAttribute()   移除当前元素的特定属性            innerHTML           设置或者获取当前节点的内容（不包含节点自身的html标签）            outerHTML           设置后或获取当前节点的所有内容（包含节点自身的html标签）            innerText           设置或者获取当前节点的内容（不包含html标签）            outerText           设置后或获取当前节点的所有内容（包含html标签）        另外，操作表格的时候可以使用insertRow，insertCell，deleteRow，deleteCell等        DOM还有很多事件，对应的event对象表示时间的状态，有许多事件函数，当被触发的时候就会执行：            onabort 图像的加载被中断。            onblur  元素失去焦点。            onchange    域的内容被改变。            onclick 当用户点击某个对象时调用的事件句柄。            ondblclick  当用户双击某个对象时调用的事件句柄。            onerror 在加载文档或图像时发生错误。            onfocus 元素获得焦点。            onkeydown   某个键盘按键被按下。            onkeypress  某个键盘按键被按下并松开。            onkeyup 某个键盘按键被松开。            onload  一张页面或一幅图像完成加载。            onmousedown 鼠标按钮被按下。            onmousemove 鼠标被移动。            onmouseout  鼠标从某元素移开。            onmouseover 鼠标移到某元素之上。            onmouseup   鼠标按键被松开。            onreset 重置按钮被点击。            onresize    窗口或框架被重新调整大小。            onselect    文本被选中。            onsubmit    确认按钮被点击。            onunload    用户退出页面。            鼠标键盘事件                altKey  返回当事件被触发时，"ALT" 是否被按下。                button  返回当事件被触发时，哪个鼠标按钮被点击。                clientX 返回当事件被触发时，鼠标指针的水平坐标。                clientY 返回当事件被触发时，鼠标指针的垂直坐标。                ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。                metaKey 返回当事件被触发时，"meta" 键是否被按下。                relatedTarget   返回与事件的目标节点相关的节点。                screenX 返回当某个事件被触发时，鼠标指针的水平坐标。                screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。                shiftKey    返回当事件被触发时，"SHIFT" 键是否被按下。    -->    <head>        <meta charset="UTF-8">        <title>动态操作节点</title>        <script type="text/javascript">            var number = 1;            function addRow() {                //添加一行                var newTr = table1.insertRow(table1.rows.length);                //添加两列                var newTd1 = newTr.insertCell();                var newTd2 = newTr.insertCell();                //设置行内容和属性                newTd1.width = "200px";                number++;                newTd1.innerText = "第" + number + "行";            }            function DeleteRow() {                if(number > 1) {                    table1.deleteRow(table1.rows.length - 1)                    number--;                } else {                    alert(" 再删就没了");                }            }        </script>    </head>    <body>        <table id="table1" border="1" cellspacing="0" cellpadding="5">            <tr>                <td width="200px">第1行</td>                <td width="200px">&nbsp; </td>            </tr>        </table>        <input type="button" value="插入行" onclick="addRow()" />        <input type="button" value="删除行" onclick="DeleteRow()" />    </body></html>
0 0