获取元素，动态添加、删除元素以及getElementByTagName、和getElementByClassName）的用法

来源：互联网发布：ubuntu wine 迅雷编辑：程序博客网时间：2024/05/22 08:21

1.获取元素
（1）getElementById
根据元素的id属性来获取元素，获取到的是一个元素
（2）getElementByTagName
根据标签名来获取元素，结果是一个元素集合
（3） getElementByClassName
根据class属性来获取元素，结果是一个元素集合
（4） getElementByName
根据name属性来获取元素，结果是一个元素集合
总结：
获取元素可以根据标签名来获取、也可以根据id、name属性来获取，根据id属性获取的是一个元素，其他的都是一个集合
Document对象支持以上四种，而element对象仅支getElementByClassName和getElementByTagName

var paras = div1.getElementsByClassName("odd");

而不可以使用：

var paras = div1.getElementsByName("odd");

但是它可以用document来代替

var paras = document.getElementsByName("odd");

2.动态添加删除元素
（1）createElement 创建一个元素
CreateElement（”p”）,创建一个段落
（2）createTextNode创建一个文本节点
CreateTextNode（“文本的内容”），创建一个值为“文本内容”的文本节点
（4） appendChid 添加一个子节点
（5） removeChid 删除子节点
删除动态添加的奇数段落
思路1：获取div下的所有的段落，遍历所有的段落，将序号为奇数的段落删除

function del(){    var div1 = document.getElementById("div1");    var paras = div1.getElementsByTagName("p");    for(var i in paras){        if((i+1)%2==1){            div1.removeChild(paras[i]);        }    }}

这种在初始时是可以的，但是随着动态添加或者删除的进行，后面的结果就不对了。因为动态删除操作就影响了原来的顺序，而程序是按照序号去判断奇偶数的，所以出现误判。
思路2：添加时通过设置name或class属性，然后通过getElementByClassName或getElementByTagName来获取奇数行
附上完整代码：

<body>    <div id="div1"></div>    <input type="button" value="添加段落" onclick="add()"/>    <input type="button" value="删除奇数段" onclick="del()"/></body><script>    var index = 1;    function add(){        //创建一个段落标签        var p = document.createElement("p");        //创建文本节点        var content = "第"+index+"段落";        var txt = document.createTextNode(content);        //将文本节点添加到段落        p.appendChild(txt);        if(index%2==1){            p.setAttribute("class","odd")        }        //将段落添加到div中        var div1 = document.getElementById("div1");        div1.appendChild(p)        index++;    function del(){        var div1 = document.getElementById("div1");        var paras = div1.getElementsByClassName("odd");        for(var i=paras.length-1; i>=0; i--){            div1.removeChild(paras[i]);        }    }</script>

还有一种方法是分别找到父节点和要删除的节点，然后执行删除操作。该方法一个前提是知道父节点是谁，该代码相对简单

function del(){    //先找到父节点    var div1 = document.getElementById("div1");    //再找到要删除的节点    var p2 = document.getElementById("p2");    //将要删除的节点从父节点中移除    div1.removeChild(p2);}

如果不知道父元素是谁呢

p2.parentNode.removeChild(p2);

分享内容有限，还得自己多动手练习

阅读全文

0 0