核心

浏览器网页就是一个DOM属性结构

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

要操作一个Dom节点，就必须要先获得这个Dom节点

获得DOM节点

  

    
h1标题
    
段落1
    
段落2
  

  

这是原生代码，之后我们尽量都使用jQuery();

更新节点

操作文本

• id1.innerText = '123' 修改文本的值
• id1.innerHTML = 'abc' 可以解析HTML标签

操作js

id1.style.color = 'red';
id1.style.fontSize = '18px';
id1.style.padding = '4em';

删除节点

• 先获取父节点，再通过父节点删除自己
• father.removeChild(child)

  
  

    
h1标题
    
段落1
    
段落2
  
  
  
  

注意：删除多个节点的时候，children数组是在时刻变化的，删除节点的时候要注意！

插入节点

• 使用innerText会覆盖原本的html元素

• 使用追加元素 xxx.appendChild(var xxx)

  javascript



  
javase
  
javaee
  
javame

创建一个新的标签，实现插入

//通过js创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newp';
newP.innerText = 'hellozcz';
list.appendChild(newP);

//创建一个标签节点（通过这个属性可以设置任何值）
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');

insertBefore插入节点

var list = document.getElementById('list');
var js = document.getElementById('js');
var ee = document.getElementById('ee');
//函数参数内包含的节点insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

表单（form）

input标签中的type属性：

• 文本框 text
• 下拉框 select
• 单选框 radio
• 复选框 checkbox
• 密码框 password
• 隐藏域 hidden
• …

表的目的：提交信息

获取要提交的信息

  

    

      用户名： 
    
    
    

      性别：
      男
      女
    
  

  

提交表单 使用md5加密密码

  
    
    
    
    
  
  
    
    

      

        用户名： 
      

      

        密 码： 
      
      

      
      提交