demo/js-02-commonDOMoperation/demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div class="parent" id="div1">
    <p id="demo" class="demo">Hello World!</p>
    <p class="demo">text2</p>
    <p>text3</p>
    <input type="text" id="input">
</div>


<script>
//查找节点方法
//    a=document.getElementById("demo");
//    console.log(a);

//    b=document.getElementsByClassName("demo");
//    console.log(b[1]);

//    c=document.getElementsByTagName("p");
//    console.log(c[2]);

//新建节点的方法
//    a=document.createElement("h2");
//    console.log(a);

//    b=document.createAttribute("disabled");
//    console.log(b);

//    c=document.createTextNode("nice to meet you");
//    console.log(c);

//添加新节点的方法
//    a=document.getElementById("input");
//    a.setAttribute("disabled","disabled");

//    a=document.getElementById("input");
//    attr = document.createAttribute("disabled");
//    attr.value = "disabled";
//    a.setAttributeNode(attr);

//    var para=document.createElement("p");
//    var node=document.createTextNode("这是一个新段落。");
//    para.appendChild(node);
//    var element=document.getElementById("div1");
//    element.appendChild(para);

//    var para=document.createElement("p");
//    var node=document.createTextNode("这是一个新段落。");
//    para.appendChild(node);
//    var element=document.getElementById("div1");
//    existingChild=document.getElementById("demo");
//    element.insertBefore( para, existingChild );

//删除节点的方法
//    var element=document.getElementById("div1");
//    a=document.getElementById("demo");
//    element.removeChild(a);

//    a=document.getElementById("demo");
//    a.parentNode.removeChild(a);

//修改节点的方法
//    var para=document.createElement("p");
//    var node=document.createTextNode("这是一个新段落。");
//    para.appendChild(node);
//    var element=document.getElementById("div1");
//    a=document.getElementById("demo");
//    element.replaceChild(para,a);

//    a=document.getElementById("input");
//    a.setAttribute("type","button");

//    a=document.getElementById("input");
//    attr = document.createAttribute("type");
//    attr.value = "button";
//    a.setAttributeNode(attr);


</script>
</body>
</html>