DOM和BOM

BOM对象简述 

一、概述

1.含义:
    JavaScript的组成
        a. EMCAScript 核心 规定了 JavaScript的语法和基本对象
        b. DOM 文档对象模型 处理网页内容
        c. BOM 浏览器对象模型 与浏览器交互的方法和接口 【全称:Browser Object Model】

2.常见的 BOM 对象
    A. Window       窗口
    B. Navigator    导航器
    C. Screen       屏幕
    D. History      历史
    E. Location     位置
1.常用的消息框
    A. alert(message) 警告框.用于显示一个指定的消息.
    B. var flag = confirm(message) 确认框.如果确认则返回true。如果取消则返回false
1. 设置循环定时器
    格式:  var 定时器ID = setInterval("方法名称()",时间间隔毫秒数);
    例如:  var id = setInterval("show()",3000);

2. 清除循环定时器
    格式: clearInterval(需要传入循环定时器ID);
    例如: clearInterval(id);
1. 设置一次性定时器
    格式:  var 定时器ID = setTimeOut("方法名称()",时间间隔毫秒数);
    例如:  var id = setTimeOut("show()",3000);

2. 清除一次性定时器
    格式: clearTimeOut(需要传入循环定时器ID);
    例如: clearTimeOut(id);
1. location 的 href 属性
    A.语法:  location.href = URL; 设置跳转到指的URL地址
      例如:  location.href = "http://www.itheima.com";

    B.语法:  var v = location.herf; 获取到当前页面地址栏当中的 URL地址

DOM对象-DOM简述

一、概述

DOM: document object model 文档对象模型,用来操作标识性文档(例如: HTML) 具体一点就是完成 “特效” 使得页面更加绚丽.
DOM树的介绍
        我们的HTML会被加载到内存当中.作为DOM树的对象.叫做 document. 每一个标签、文本、属性等都会被封装成为 DOM树的节点对象.
        细分分别叫做 “元素节点”、“文本节点”、“属性节点”但是都会被成为 节点.各个节点之间的关系有 父子节点关系,还有兄弟节点关系.
获取元素节点对象,四种方式:
    A. 方式一:   
        格式:  var v01 = document.getElementById("username");
        特点:  只能获取到 id = "username"的input元素对象。不带s,获取一个元素

    B. 方式二:
        格式:  var v02 = document.getElementsByName("hobby");
        特点:  获取到的是input元素集合或者 input元素数组.例如: 多选框的操作。带有s获取多个元素

    C. 方式三:
        格式:  var v03 = document.getElementsByTagName("li");
        特点:  获取到的是li元素集合或者元素数组.例如: 无序列表的操作。带有s获取多个元素

    D. 方式四:
        格式:  var v04 = document.getElementsBbyClassName("password");
        特点:  获取到的是 input 元素集合或者 input 元素数组。例如: input单选操作。带有s获取多个元素
要想获取某个元素节点对象,必须先保证这个元素节点被加载到内存中。
获取元素节点对象的操作,应该写在元素节点之后.
A. 获取属性值: 元素对象.属性;
    例如: 
        a. 元素对象.value
        b. 元素对象.className

B. 设置属性值: 元素对象.属性 = 新值;
    例如:
        a. 元素对象.value = "赵信"
        b. 元素对象.className = "cs2"
checked 属性 true/false

设置单选按钮获取复选框的这个属性值.很常见,必须掌握
1. innerHTML 介绍
    使用元素对象的 innerHTML 属性可获取内容体,给innerHTML属性赋值就是修改内容体,还可以进行内容追加。
    注意:innerHTML属于javascript的一个输出语句,浏览器会把输出的这段文字当html来解析,于是就厉害了

2. innerHTML 用法
    a. 获取数据的操作:  var 数据 = 节点对象.innerHTML;
    b. 设置数据的操作:  节点对象.innerHTML = 数据值;
    c. 追加数据的操作:  节点对象.innerHTML += 追加数据值;
 
 
posted @ 2018-06-02 23:26  吃奶滴虫虫  阅读(102)  评论(0编辑  收藏  举报