首页 > 代码库 > DHtml

DHtml

一.DHTML
    1.DHTML概述
        将html文档中所有的元素都用js对象来进行表示, 用对象来表示元素, 用对象之间的引用关系来表示元素之间的层级关系

        用一颗文档结构树来表示整个html文档
        
        对象上可以设计属性和方法, 可以通过操作对象上的属性和方法来改变元素的属性和行为

        利用这种方式, 将js和html整合在一起, 形成了DHTML技术.

        DHTML可以被分为BOM和DOM两部分内容:
        BOM: Browser Object Model    浏览器对象模型
        DOM: Document Object Model    文档对象模型
        
    2.BOM
        window对象:
            重要属性:
                closed -- 表示引用窗口是否关闭 true/false
            重要事件:
                onblur -- 当对象失去焦点时触发
                onfocus -- 当对象获取焦点时触发
                onload -- 在页面加载完成后触发
            重要方法:
                alert -- 消息对话框
                confirm -- 确认对话框
                setInterval -- 重复定时器
                setTimeout -- 一次性定时器
            子对象:
                history
                location
                navigator
                document(后面讲)
        history:(!)
            重要属性: length -- 获取窗口浏览的历史信息的个数
            重要方法:
                back() -- 后退
                forward() -- 前进
                go() -- 跳转        
        location:(!!!)
            重要属性: href -- 获取或设置url地址
        
    3.DOM
        (1)获取元素
            getElementById() -- 通过id来获取指定元素
            getElementsByName() -- 通过name来获取指定元素
            getElementsByTagName() -- 通过标签名来获取指定元素
            obj.value -- 获取或设置输入控件的value属性的值
            obj.innerHTML -- 获取或设置元素内部的html
                //IE10以下的浏览器中, 不支持Select和table上的innerHTML属性
            obj.innerText -- 获取或设置元素内部的文本
            
        (2)增删改文档中的元素
            document.createElement() -- 创建节点
            appendChild()-- 添加子节点
            insertBefore() -- 插入节点
            removeChild() -- 删除子节点
            removeNode()-- 删除节点本身(有兼容性问题)
            replaceChild() -- 替换子节点
            replaceNode() -- 替换节点(有兼容性问题)
            cloneNode() -- 克隆节点
            parentNode属性 -- 获取父节点

            className -- 设置或获取对象的类。
            display -- 设置或获取对象是否显示。
            checked -- 设置或获取复选框或单选钮的状态

DHtml