JavaScript获取和创建元素

Posted 2020-08-19 小白T哥

1、javascript中获取元素

常用的获取document中元素的方法：

　　1) document.getElementById()  =》通过元素ID获取文档中特定的元素，如获取 id = "button1" 的按钮 可以写成： var btn = document.getElementById("button1");

　　2) document.getElementByTagName() =>获取特定标签的元素集合（返回为 NodeList 结果），因为一个document中可能会有多个该tag的元素。

　　　　如： var divs = documet.getElementByTagName("div"); 获取文档中所有的div;

　　　　divs.length 获取元素个数，divs[0]取得第一个元素

2、动态创建元素并添加到页面中

　1）//创建一块文本，并添追加到文档的最末尾

　　function addText(){
    　　var text = document.getElementById("txtarea").value;
    　　var newText = document.createTextNode(text);
    　　var newPart = document.createElement("P");
    　　newPart.appendChild(newText);
   　　 var body = document.getElementsByTagName("body")[0];
   　　 body.appendChild(newPart);
    
   　　 return false;
　　}
2）//创建一个超链接，并指定url
function addLink() {
    var linkA = document.createElement("a");
    linkA.href = "http://www.baidu.com";
    linkA.innerText = "GOTO...";
    linkA.title = "goto another url";
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(linkA);
    alert("添加成功！");
}

3）创建一个按钮并指定单击事件

var btnCnt = 0;
function addNewBtn(){
    btnCnt += 1;
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = "new btn" + btnCnt;
    btn.id = "btn" + btnCnt;
    btn.onclick = newBtnClicked;
    var div = document.getElementById("div1");
    div.appendChild(btn);
    alert("OK");
}

function newBtnClicked() {
    alert("New button clicked here");
}

4）删除指定的按钮

function removeBtn(){
    if(btnCnt == 0){
        alert("No button to delete");
        return;
    }
    var btn = document.getElementById("btn" + btnCnt);
    if(btn != null){
        document.getElementById("div1").removeChild(btn);
        alert("removed");
        btnCnt -= 1;
    }
    else{
        alert("Not found btn" + btnCnt);
    }
}

注：因为 btn 是在 div 中添加的，因此需要从DIV中删除，而不是直接从document中删除。

5）除了增加、删除外，还可以调用 节点.insertBefor(new,old)的方式在节点的old前面插入新元素；或节点.replace(new ,old)方法替换节点处的元素