Javascript第十二个知识点：Dom

• Dom --> document object model 文档对象模型

• 我们编写的HTML代码中，有许多标签，body、h1、p、div……都可以成为节点。

• 我们操控dom节点就是使用javascript去操控html里的每一个标签

那么我们该怎么操作dom节点呢？

获取dom节点

• 首先我们应该获取dom节点

var h1 = document.getElementsByTagName("h1");//通过标签名获得节点
var x = document.getElementById("x");//通过id获得节点
var y = document.getElementsByClassName("y");//通过class获得节点
​
var father = document.getElementById('father');//获得父亲姐弟啊
var childern = father.children;//通过父亲节点获得所有子节点

改变dom节点内容：

father.innerText = '你好，我是div';
father.style.background = 'orange';

删除dom节点：

      
你好，java
      
用id得到节点
      
用class得到节点

创建节点：

   

            
你好，java
            
用id得到节点
            
用class得到节点
            
第四个节点
        
         
//此外创建如script、body这样的节点，我们需要给他说明类型：
        
​

整体步骤就是：

1. 使用createElement创建新节点

2. 给新节点赋予属性(id、type···)

插入节点：

我是新来的节点
        

            
你好，java
            
用id得到节点
            
用class得到节点
            
第四个节点
        
         

整体步骤就是：

1. 拿到新节点

2. 找到父节点

3. 拿到目标节点

4. 将新节点用insertbefore放在目标节点前面