增删改查及属性

节点的增删改查

节点创建

元素节点：document.createElement(tag标签名称);

文本节点：document.createTextNode(文本内容);

属性设置：node.setAttribute(名称，值);

节点追加

父节点.appendChild(子节点); // 向父节点添加最后一个子节点

父节点.insertBefore(newnode,oldnode); // 将newnode放到oldnode的前边

节点删除

父节点.removeChild(子节点);

父节点.remove();

实现对元素的增删改查

<body>
        <span>这是一个span</span>
        <ul id="list">
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
        </ul>
    </body>
    <script type="text/javascript">
//      元素节点的增删改查
        
//      增
        var div = document.createElement("div")
        console.log(div)
        
        document.body.appendChild(div)
        
        div.innerHTML = "hahahaha"
        
        div.className = "box";
        
//      删
//      div.remove()
        var ospan = document.querySelector("span")
//      ospan.remove()
        
        var olist = document.getElementById("list")
        var oli2 = olist.children[1]
//      oli2.remove()
        olist.removeChild(oli2)
        
//      改
        console.log(ospan.outerHTML)
        ospan.outerHTML = "<em>" + ospan.innerHTML + "</em>";
    </script>

非内置属性

getAttribute(name)

描述：获取指定对象的属性名的属性值

返回：属性值

     console.log(obox.feng)   // 获取不到值
     console.log(obox.getAttribute("feng"))

removeAttribute(name)：

描述：移除指定对象的属性

obox.removeAttribute("a")

节点公共的属性

 父节点.firstChild：返回第一个子节点,包含空白节点(文本节点)
       .firstElementChild:返回第一个子节点
 父节点.lastChild：返回最后一个子节点

nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）

nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）(IE7/8不支持）

previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点),只读属性；(IE7/8不支持）
childNodes：返回子节点列表(包括,文本节点,注释节点)，返回时一个组数
children: 只返回元素节点

节点

parentNode：返回父节点

其他

nodeName：返回节点名字
nodeValue：返回节点值 （针对文本节点）
nodType ;  返回节点的类型

2019-09-06