操作DOM对象

操作DOM对象

DOM：文档对象模型

核心

浏览器网页就是一个DOM树形结构

• 更新：更新DOM节点
• 遍历：得到DOM节点
• 删除：删除一个DOM节点
• 添加：添加一个新的节点

要操作一个DOM节点，就必须先获取这个DOM节点

获得DOM节点

	<div id="father">
        <h1>标题一</h1>
        <p1 id="p1">p1</p1>
        <p1 class="p2">p2</p1>
    </div>

    <script>
        let h1 = document.getElementsByTagName('h1');
        let p1 = document.getElementById('p1');
        let p2 = document.getElementsByClassName('p2');
        let father = document.getElementById('father');
        //获取父节点下的所有子节点
        let childrens = father.children;
    </script>

更新

• id1.innerText = '123';  //修改文本的值
  

• id1.innerHTML = '<strong>123</strong>'  //解析HTML文本标签
  

删除

删除结点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p1 id="p1">p1</p1>
    <p1 class="p2">p2</p1>
</div>

<script>
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    let father = document.getElementById('father');
    father.removeChild(p1);
</script>

插入

把javascript放入div最后一行

	<p id="js">JavaScript</p>
    <div id="list">
        <p id="Java">Java</p>
        <p id="Python">Python</p>
        <p id="Scheme">Scheme</p>
    </div>

如下

	
    <script>
        let js = document.getElementById('js');
        let list = document.getElementById('list');
        list.append(js);
    </script>

如果插入的是已有的节点，原节点会从原位置上删除

如果是全新节点，如下所示：

• 添加没有的css元素

	<script>
        let style = document.createElement('Style');
        style.setAttribute('type','text/css');
        style.innerHTML = 'p {color : red}';
        document.getElementsByTagName('head')[0].append(style);
    </script>

• 添加全新的p元素

          let style = document.createElement('p');
          style.id = "cpp";
          style.innerText = "cpp";
          document.getElementById('list').append(style);