[暑假] DOM实践运用

1. 什么是DOM?

文档对象模型(Document Object Model, 简称 DOM), 是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口

2. DOM作用:

                由W3C已经定义了一系列的DOM接口, 通过这些DOM接口可以改变网页的内容, 机构和样式.  

        说白了DOM就是用来处理网页的

文档: 一个页面就是一个文档, DOM中使用document表示

元素: 页面中所有的标签都是元素, DOM中使用 element 表示

节点: 网页中所有内容都是节点 (标签, 属性, 文本, 注释等), DOM中使用node表示

DOM 把以上内容都看作是对象

3. 我们如何获取页面中的元素?

    有四种方法:

                根据ID获取

                根据标签名获取

                通过HTML5新增的方法获取

                特殊元素获取

4.介绍 getElementById()

        方法getElementById(),返回的是一个元素对象

    
    
    
    


    2019-9-9
    

5.介绍getElementByTagName() 方法

        使用 getElementsByTagName() 方法可以返回带有指定标签签名的对象的集合

返回的是 获取过来元素对象的集合 以伪数组的形式存储的

6. 介绍element.getElemenntsByTagName('标签名');

        根据标签名获取:

                还可以获取某个元素(父元素)内部所有指定标签名的子元素

             element.getElemenntsByTagName('标签名');

其中 父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己

    
    
    
    


    

        
加油
        
从今天开始变得更好
        
不怕吃苦
        
我们都可以坚持
        
不怕困难
        
我们总能克服
    
    
    

7.H5新增获取元素方式

    
    
    
    


    饭盒1
    饭盒2
    
        

            
加油
            
从今天开始变得更好
            
不怕吃苦
            
我们都可以坚持
            
不怕困难
            
我们总能克服
        
    
 
    
    

8.什么是事件?

所谓事件 说白了就是  触发然后响应的机制 

事件是由三部分组成  事件源  事件类型  事件处理程序  我们也称之为事件的三要素

          1)   事件的组成

                  1. 事件源: 就是事件被触发的对象 ==>简单理解就是谁被触发了

                2.事件类型: 就是如何触发   比如:鼠标点击(onclick) 还是鼠标经过  还是键盘按下

                3.事件处理程序: 通过一个函数赋值的方式完成

    
    
    
    


    学起来
    

           2) 执行事件的步骤

                        1.获取事件源

                        2.注册事件( 绑定事件 )

                        3. 添加事件处理程序 (采取函数复制形式)

    
    
    
    


    123
  

               3) 常见的鼠标事件

                

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

9.操作元素(DOM中核心重点)

        JavaScript的DOM操作可以改变网页内容, 结构和样式, 我们可以利用DOM操作元素改变元素里面的内容, 属性等. 

               1.改变元素内容

                        element.innerText

                从起始位置到终止位置的内容, 但它不包括HTML标签, 而且空格和换行也会去掉

                       element.innerHTML

                 从起始位置到终止位置的全部内容, 包括html标签, 通识保留空格和换行

                       

               2.innerText 和 innerHTML的区别:

                                重点就一句话: innerHTML推荐使用

以下为进一步解释:

1.innerText 不识别HTML标签 不是W3C规定的标准   同时去除空格和换行

                           

2. innerHTML可以识别HTML标签  也是W3C规定的标准  保留空格和换行

    
    
    
    


    
    

        我爱坚持 因为坚持很酷
        变得优秀只是第一步
    
    
    

                 3.修改元素属性

                

    
    
    
    


    天空
    努力
    

    
    

                4.修改表单中的属性

                 innerHTML这个是用来修改 普通盒子 比如 div标签里面的内容的

                而表单元素里面的值  文字内容是通过value来修改

    
    
    
    


    按钮
    
    
    

                5. element.属性  是可以获取内置属性值 (就是元素本身自带的属性)

                     element.getAttribute('属性');   主要是获取自定义属性(标准) 就是我们程序员自己定义的属性