欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DOM和BOM

程序员文章站 2024-03-20 10:16:40
...

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 += 追加数据值;