DOM的增删改查

作者: 饥人谷__陈俊豪 | 来源:发表于2017-04-23 21:10 被阅读0次

DOM 的一些增删改查
JavaScript DOM元素节点操作方法总结
mysql的插入语句
前端基础知识复习(三)
虚拟DOM（2）
MYSQL数据库的增删改查
DOM 增删改查
dom增删改查
DOM 增删改查
DOM 增删改查

** 文档对象模型（DOM），他给文档（结构树）提供了一个结构化的表达方法。**

DOM结构树

demo链接

<body>
    <button>添加</button>
    <p class="p1">别删除我呀~~ p1
        <span class="span">hello</span>
    </p>
    <div class="div1">别改我~别改我~
        <span class="span2">那就只能改你了</span>
    </div>
</body>
<script>
    var btn = document.querySelector('button')
    var Body = document.querySelector('body')
    var p1 = document.querySelector('.p1')
    var span1 = document.querySelector('.span')
    var div1 = document.querySelector('.div1')
    var span2 = document.querySelector('.span2')
    btn.addEventListener('click',function(){
        
        // 1. 创建一个元素  div，这里可以是任意元素
        // 把新Div 插入到Body上
        let Div = document.createElement('div')     
        Body.appendChild(Div)


        // 2. 生成一个文本节点，参数就是文本所需要的内容
        // 把文本插入到所需要的元素上 
        // 插入的位置也可以用insertBefore()  
        let txt = document.createTextNode('Hello我是文本');
        Div.appendChild(txt)

        // 3.给元素添加一个属性
        // 让它的字体颜色变为红色  
        let Atb = document.createAttribute('class')
        Atb.value = 'attribute'
        Div.setAttributeNode(Atb);


        // 4.删除一个p的子节点
        // 然后再通过parent删除自身
        p1.removeChild(span1)
        p1.parentNode.removeChild(p1)


        // 5.新增一个节点，把新增节点跟p1对换
        var div1Txt = document.createTextNode("a啊啊啊啊~~我被改了~~");
        var newDiv = document.createElement('span')
        newDiv.appendChild(div1Txt)
        var parentDiv = span2.parentNode;
        parentDiv.replaceChild(newDiv,span2)


        // 6.div1 添加内容
        div1.innerHTML += "我是被新增的"

        // 各种获取元素的方法
        /*
            getElementById(id)
            getElementsByTagName(element)
            getElementsByClassName(class)
            
        */
    })
</script>