Javascript DOM对象

当网页被加载时，浏览器会创建页面的文档对象模型。 

HTML DOM 模型被构造为对象的树

整体构造如下        

 DOM可以完成的功能

1.Javascript 能够改变页面中的所有 HTML 元素

Tip:html元素必须提供id属性.当id属性相同时，只控制第一个

1.getElementById(id属性值);通过 id 查找 HTML 元素 2.document.getElementsByTagName(标签名)通过标签名查找 HTML 元素  3.document.getElementsByClassName(class属性值)通过类名class属性名称找到 HTML 元素

    
    
    
    
    


        
今天
        
天气不错
        
        我吃了
        你呢
        

        那你还不去

        好的 我这就去

        

2.Javascript 能够改变页面中的所有 HTML 属性

1.innerHTML ---  会得到或者修改html元素以及元素内容

2.innerText --- 会得到或者修改html元素的文本内容

3.value属性---得到或者修改表单元素的内容

得到html元素的属性值:dom对象.属性名称

修改html元素的属性值:dom对象.属性名称=属性值;

        
    
    
        
我会变
        

        
        

        
        

        
我也e 会
        

        
        

        
        

        
        

        
        

        
      

3.Javascript 能够改变页面中的所有 CSS 样式

1.得到html元素的css属性值:dom对象.style.属性名称(只适用于行内设置css)

修改html元素的css属性值:dom对象.style.属性名称=属性值

    
    
    
    
    


    
即将变大
    

    

  

4.Javascript 能够对页面中的所有事件做出反应

页面初始化事件--onload---当html页面被打开的时候触

1. 在body元素添加οnlοad="事件执行函数"

2.点击事件--onclick---当html页面中的元素被点击时候触发

3.聚焦事件--onfocus---当html页面中的元素获得焦点的时候触发
   失焦事件--onblur---当html页面中的元素失去焦点的时候触发

4.鼠标进入事件--onmouseover--当鼠标移动到html元素上的时候触发
   鼠标移出事件--onmouseout--当鼠标从html元素上的移动出去以后时候触发

5.表单提交事件--onsubmit--当提交表单的时候触发

1.只为表单添加,表单的提交按钮一定是type="submit"
2.需要使用return 事件处理函数;
3.事件处理函数的返回值一定boolean值

6.键盘按下事件--onkeydown--当按下键盘按键的时候触发

    
        
        
        
        
        
    
    
            
页面初始化
            
            

            
            
            鼠标进入事件--onmouseover--当鼠标移动到html元素上的时候触发
            鼠标移出事件--onmouseout--当鼠标从html元素上的移动出去以后时候触发
            
            

                 

                 

                 
             
    

5.测试创建html元素

创建元素

document.createElement("元素名称");

document.createTextNode("文本内容");

父元素的dom对象.appendChild(node);

删除元素 父元素的dom对象.removeChild(子元素的dom对象);

    
        
        
        
        
        
            #div1{
                width: 400px;
                height: 350px;
                border: 5px solid rgb(0, 15, 5);
            }