JavaScript——DOM操作应用

来源：互联网发布：mpu9250 九轴融合算法编辑：程序博客网时间：2024/05/01 08:53

创建DOM元素
appendChild添加到父级的末尾
父级.appendChild(子节点)
var oLi = document.createElement(‘li’);创建节点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script type="text/javascript">window.onload = function (){    var oBtn = document.getElementById('btn1');    var oUl = document.getElementById('ul1');    var oTxt = document.getElementById('txt');    oBtn.onclick = function(){        var oLi = document.createElement('li');        oLi.innerHTML = oTxt.value;        oUl.appendChild(oLi);    }}</script></head><body>    <input id="txt" type="text">    <input id="btn1" type="button" value="创建li" />    <ul id="ul1"></ul></body></html>

每次点击按钮，就会出现一个li的列表
在文本框中每输入的内容，都会在li列表中显示出来
插入DOM元素
父级.insertBefore(子节点，在谁之前)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script type="text/javascript">window.onload = function (){    var oBtn = document.getElementById('btn1');    var oUl = document.getElementById('ul1');    var oTxt = document.getElementById('txt');    oBtn.onclick = function(){        var oLi = document.createElement('li');        var aLi = oUl.getElementsByTagName('li');        oLi.innerHTML = oTxt.value;        if (aLi.length > 0) {            oUl.insertBefore(oLi, aLi[0]);        } else {            oUl.appendChild(oLi);        }    }}</script></head><body>    <input id="txt" type="text">    <input id="btn1" type="button" value="创建li" />    <ul id="ul1"></ul></body></html>

类似论坛、微博等，可以插入到第一个节点

删除DOM元素
父级. removeChild(子节点)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script type="text/javascript">    window.onload = function(){        var aA = document.getElementsByTagName('a');        var oUl = document.getElementById('ul1');        for (var i = 0; i < aA.length; i++) {            aA[i].onclick = function (){                oUl.removeChild(this.parentNode);            }        };    }</script></head><body>    <ul id="ul1">        <li>gsifgcbweiu<a href="javascript:;">删除</a></li>        <li>uegvwr<a href="javascript:;">删除</a></li>        <li>168<a href="javascript:;">删除</a></li>        <li>ujuybfgcsd<a href="javascript:;">删除</a></li>        <li>184916<a href="javascript:;">删除</a></li>    </ul></body></html>

点击删除的时候，li列表的父级会删除

文档碎片
createDocumentFragment创建文档碎片

Document

window.onload = function(){ var oUl = document.getElementById('ul1'); var oFrag = document.createDocumentFragment(); for (var i = 0; i

1 0