javascript基础知识梳理-DOM .

来源：互联网发布：淘宝客服聊天字体颜色编辑：程序博客网时间：2024/05/01 23:16
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>DOM操作</title><script type="text/javascript">window.onload = function() {//查询文档的一个或多个元素有如下方法,用指定的id属性,name属性,标签名称,css类,css选择器//使用id属性的时候如果文档中出现了两个id属性相同的元素,那么只会选取第一个元素var btn = document.getElementsByName("b1");console.log(btn);//使用name属性查找元素可以返回多个属性名称相同的元素,结果返回NodeList对象var btns = document.getElementsByName("b1");console.log(btns);//通过标签名选取元素,getElementsByTagName,如果使用通配符*,将取到文档中所有的元素var inputList = document.getElementsByTagName("input");console.log(inputList.length);//每个Element元素也有getElementsByTagName方法,只是范围缩小到该Element元素的所有后代元素var div1 = document.getElementById("div1");var div1_style = div1.style;var btns_div1 = div1.getElementsByTagName("input");console.log(btns_div1);console.log("div1.innerHTML:" + div1.innerHTML);console.log("div1.nodeName:" + div1.nodeName);console.log("div1.nodeValue:" + div1.nodeValue);console.log("div1.nodeType:" + div1.nodeType);var b3 = document.getElementById("b3");var b4 = document.createElement("input");b4.value = "button4";b4.id = "b4";b4.type = "button";//div1.appendChild(b4);//追加元素到父节点末尾//div1.insertBefore(b4, b3);//将元素插入到父节点的某个子节点前面//div1.removeChild(b3);//删除某个子节点div1.replaceChild(b4, b3);//使用新元素替换旧元素,等同于先调用insertBefore将新元素插入到旧元素之前,再调用removeChild删除旧元素}</script></head><body><input type="button" name="b1" value="button1" /><input type="button" name="b1" value="button2" /><div id="div1"><input type="button" id="b3" value="button3" /></div></body></html>
0 0