js总结-关于节点的增删改查

---

js操作元素节点的基本方法

html结构:

   <div class="box">
        <ul class="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li id="four">4</li>
            <li>5</li>
        </ul>
    </div>

1 查询

			 //1.1查询所有的子节点(包含空白节点)
            var ul = document.getElementsByClassName('ul')[0];
            var lisNote = ul.childNodes;
            var fou = document.getElementById('four');
            /*
            注:这种子节点获取方式会返回空白节点(文本节点#text)
            在实际应用中,并不好用
            */
            //1.2 获取所有的元素子节点,这种方式靠谱
            var lis = ul.children;
            console.log(lis);
            //1.3 获取父元素节点
            var f = ul.parentNode;
            console.log(f);

2 添加一个节点

 //分三步走:
            //2.1 创建一个节点
            //2.2 给节点添加属性
            //2.3 将当前节点添加到父节点中

            var newLi = document.createElement('li');
            newLi.innerText = '我是新加的';
            //添加到父节点末尾
            // ul.appendChild(newLi);

            var newLi2 = document.createElement('li');
            newLi2.innerText = '我是新加在某一元素前';
            //添加到某一元素节点前
            ul.insertBefore(newLi2,fou);

            //另外一种方法:还可以用父元素.innerHtml 添加一个节点,但要注意覆盖问题
            ul.innerHTML += '<li>我也是新来的</li>';

3改

        //3.1 获取节点
        //3.2 修改节点属性
        //没啥好演示的,也没有set一类的方法
        //替换节点:
        //父节点.replaceChild(新的节点,已有节点);

4 删除

// 4.删除
//4.1 :父节点.removeChild(需要删除的节点);//删除节点 这种方式一次性只能删除一个节点
//4.2 如果想要删除父节点里面的所以节点:
//1.可以使用循环遍历,然后配合removeChild删除
//2.也可以:父元素.innerHTML = “”

5js 操作节点的常用方法

e.appendChild() 把新的子节点添加到指定节点e末尾。
e.removeChild() 删除子节点,只能删除一个
e.replaceChild(新节点,要替换的节点) 替换子节点。
insertBefore(新节点,参照节点) 在指定的子节点前面插入新的子节点。

createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。

getAttribute(‘属性名’) 返回指定的属性值。
setAttribute(‘属性名’,‘属性值’) 把指定属性设置或修改为指定的值。