第三节 DOM（文档对象模型）

DOM （文档对象模型），简单来说就是当网页被加载时，浏览器会为整个网页创建一个对象document
1、查找元素

    
        
        

    

    

        
第一个段落标签
        
第二个段落标签

        
    

网页输出：

image.png

    
        
        

        

        
    

    

        
第一个段落标签
        
第二个段落标签

    

2、查找多个元素

    
        
        

        

        
    

    

        
第一个段落标签
        
第二个段落标签

    

网页显示：

image.png

3、操作css

    
        
        
        
        

        

        
    

    

        
第一个段落标签
        
第二个段落标签

    

网页显示：

image.png

4、innerHTML、innerText

    
        
        
        
        

        

        
    

    

        

            第一个段落标签 
            
                颜色变啦 
                跳转
            
            
        

    

网页显示：

image.png

网页显示：

image.png

5、设置属性、获取属性

网页显示：

image.png

如果这个属性是我们自己定义的就不能这么用了

网页显示：

image.png

html中的属性也可以被修改

image.png

6、文本事件

    
        
        
        

        
    

    

        用户名：

    

网页显示：

image.png

7、form表单 submit一点问题
看下这段代码：

    
        
        
        

        
        
        
    

    
        
        

            用户名：

            
            
        

        

    

注意下form标签的onsubmit属性

onsubmit="return checkValue()"

在submit提交时，如果onsubmit属性的值是"return true"则会提交，如果onsubmit属性的值是"return false",则不会提交
例如上面的代码中我们需要在提交前检验输入的合法性，如果用户名是"zhangsan"就不让提交
网页显示：

image.png

8、下拉列表 onchange事件

    
        
        
        

        
        
        
    

    
        
        
            北京
            上海
            深圳
        

        

    

网页显示：

image.png

还有一种简单写法：我们可以直接把当前元素作为参数传递给方法

    
        
        
        

        
        
        
    

    
        
        
            北京
            上海
            深圳