JavaScript操作Bom、Dom对象

JavaScript操作Bom、Dom对象

BOM模型

  • BOM：浏览器对象模型（Browser Object Model）
    • BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
  • BOM可实现功能
    • 弹出新的浏览器窗口
    • 移动、关闭浏览器窗口以及调整窗口的大小
    • 页面的前进、后退
  • img

  1. window对象的常用属性

    • 常用的属性

    • 常用的方法

      • 属性名称 说明
        history 有关客户访问过的URL信息
        location 有关当前URL的信息 
      • window.属性名= "属性值" 

      • window.location="https://www.baidu.com" ; 
//表示跳转到百度首页

  2. window对象的常用方法

    • 常用的方法

      • 方法名称 说明
        prompt（） 显示可提示用户输入的对话框
        alert() 显示带有一个提示信息和一个确定按钮的警示框
        confirm() 显示一个带有提示信息、确定和取消按钮的对话框
        close() 关闭浏览器窗口
        open() 打开一个新的浏览器窗口，加载给定的URL所指定的文档
        setTimeout() 在指定的毫秒数后调用函数或计算表达式
        setInterval() 按照指定的周期(以毫秒计)来调用函数或表达式

  3. confirm()方法

    • confirm()与alert()、prompt()区别

      • alert():一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

      • prompt():两个参数，输入对话框，用来提示用户输入一些信息，单击"取消"按钮则返回null，单击"确定"按钮则返回用户输入值，常用于收集用户关于特定问题而反馈的信息

      • confirm():一个参数，确认对话框，显示提示对话框消息、"确定"按钮和"取消"按钮，单击”确定“按钮返回true，单击”取消“按钮返回法拉瑟，因此与if-else语句搭配使用

      • <script type="text/javascript">
     var flag=cofirm("确认要删除此条信息吗？");
     if(flag==true)
         alert("删除成功！");
     else
         alert("你取消了删除");
</script>

  4. open()方法

    • 属性名称 说明
      height、width 窗口文档显示区的高度、宽度。以像素计
      left、top 窗口的x坐标、y坐标。以像素计
      toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是yes
      scrollbars=yes|no|1|0 是否显示滚动条。默认是yes
      location=yes|no| 1|0 是否显示地址地段。默认是yes
      status=yes|no|1|0 是否添加状态栏。默认yes
      menubar=yes|no|1|0 是否显示菜单栏。默认是yes
      resizable=yes|no|1|0 窗口是否可调节尺寸。默认是yes
      titlebar=yes|no|1|0 是否显示标题栏。默认是yes
      fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是no。处于全屏模式的窗口必须同时处于剧院模式 
    • window.open("弹出窗口的url","窗口名称","窗口特征")

  5. history对象

    • 常用方法

    • 名称 说明
      back() 加载history对象列表中的前一个URL
      forward（） 加载history对象列表中的下一个URL
      go() 加载history对象列表中的某个具体URL

    • history．back 等价于 history.go(-1) 浏览器中的“后退”

    • history.back 等价于 history.go(1) 浏览器中的“前进”

  6. location对象

    • 常用属性

      • 名称 说明
        host 设置或返回主机名和当前URL的端口号
        hostname 设置或返回当前URL的主机名
        href 设置或返回完整的URL

    • 常用方法

      • 名称 说明
        reload() 重新加载当前文档
        replace() 用新的文档替换当前文档

  7. Document对象

    • 常用属性

      • 名称 说明
        referrer 返回载入当前文档的URL
        URL 返回当前文档的URL 
      • document.referrer
document.URL
//语法

    • Document对象的常用方法

      • 名称 说明
        getElementById() 返回对拥有指定id的第一个对象的引用(对象的id唯一)
        getElementByName() 返回带有指定名称的对象的集合(相同name属性)
        getElementsByTagName() 返回带有指定标签名的对象的集合(相同元素)
        write() 向文档写文本、HTML表达式或JavaScript代码

  8. JavaScript内置对象

    • Array：用于在单独的变量名中存储一系列的值
    • String：用于支持对字符串的处理
    • Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
    • Date：用于操作日期和时间

  1. Date对象

    • 方法 说明
      getDate() 返回Date对象的一个月中的一天，其值介于1~31之间
      getDay 返回Date对象的星期中的一天，其值介于0~6之间
      getHours() 返回Date对象的小时数，其值介于0~23之间
      getMinutes() 返回Date对象的分钟数，其值介于0~59之间
      getSeconds() 返回Date对象的秒数，其值介于0~59之间
      getMonth() 返回Date对象的月份，其值介于0~11之间
      getFullYear 返回Date对象的年份，其值为4位数
      getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数

  2. Math对象

    • 常用方法

      • 方法 说明 示例
        ceil 对数进行上舍入 Math.ceil(25.5);返回26
        Math.ceil(-25.5);返回-25
        floor() 对数进行下舍入 Math.floor(25.5);返回25
        Math.floor(-25.5);返回-26
        round() 把数四舍五入为最接近的数 Math.round(25.5);返回26
        Math.round(-25.5);返回-26
        random() 返回0~1之间的随机数 Math.random();例如：
        0.6273608814137365

  3. 定时函数

    • setTimeout()

      • setTimeout("调用的函数",等待的毫秒数);
var myTime＝setTimeout("disptime() ", 1000 );//1秒(1000毫秒)之后执行
函数disptime()一次

    • setinterval()

      • setInterval("调用的函数",间隔的毫秒数)
var myTime＝setInterval("disptime() ", 1000 );//每隔1秒(1000毫秒)执行函数disptime()一次
//如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()

    • clearTimeout()

      • clearTimeout(setTimeOut()返回的ID值)
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；//清除函数

    • clearInterval ()

      • clearInterval(setInterval()返回的ID值)
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；//清除函数

  4. 操作DOM

    • [图片上传失败...(image-e55d66-1573610613629)]

    • [图片上传失败...(image-cc6d55-1573610613629)]

    • 访问节点

      • 使用getElement系列方法访问指定节点
        • getElementById()
        • getElementsByName()
        • getElemtsByTagName()

    • 根据层次关系访问节点

      • 节点属性

      • 属性名称 描述
        parentNode 返回节点的父节点
        childNodes 返回子节点集合，childNodes[i]
        firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本
        节点
        lastChild 返回节点的最后一个子节点
        nextSibling 下一个节点
        previousSibling 上一个节点

    • 根据层次关系访问节点

      • element属性

        • 属性名称 描述
          firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
          lastElementChild 返回节点的最后一个子节点
          nextElementSibling 下一个节点
          previousElementSibling 上一个节点

    • 节点信息

      • nodeName:节点名称

      • node Value:节点值

      • nodeType:节点类型

        • 节点类型 NodeType值
          元素element 1
          属性attr 2
          文本text 3
          注释comments 8
          文档document 9

    • 操作节点的属性

      • getAttribute("属性名")
setAttribute("属性名","属性值")

    • 创建和插入节点

      • 创建节点

        • 名称 描述
          createElement( tagName) 创建一个标签名为tagName的新元素节点
          A.appendChild( B) 把B节点追加至A节点的末尾
          insertBefore( A,B ) 把A节点插入到B节点之前
          cloneNode(deep) 复制某个指定的节点

    • 删除和替换节点

      • 名称 描述
        removeChild( node) 删除指定的节点
        replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点 
      • var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);
var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);

  5. style属性

    • HTML元素.style.样式属性＝"值"

      • document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";
    • 名称 描述
      onclick 当用户单击某个对象时调用事件
      onmouseover 鼠标移到某元素之上
      onmouseout 鼠标从某元素移开
      onmousedown 鼠标按钮被按下

    • 背景backgroundColor、backgroundImage、backgroundRepeat

    • 文本fontSize、fontWeight、textAlign、textDecoration、font、color

    • 边距padding、paddingTop 、paddingBottom、paddingLeft、paddingRight

    • 边框border、borderTop、borderBottom、borderLeft、borderRight

  6. className属性

    • HTML元素.className="样式名称"

      • function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}

  7. 获取元素的样式

    • HTML元素.style.样式属性;

      • alert(document.getElementById("cartList").display);

    • document.defaultView.getComputedStyle(元素,null).属性;

      • var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);

    • HTML元素. currentStyle.样式属性;

      • alert(document.getElementById("cartList").currentStyle.display);
//currentStyle  兼容IE浏览器

    • HTML 中元素属性

      • 元素属性应用

      • 属性 描述
        offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
        offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
        offsetHeight 返回元素的高度
        offsetWidth 返回元素的宽度
        offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
        scrollTop 返回匹配元素的滚动条的垂直位置
        scrollLeft 返回匹配元素的滚动条的垂直位置
        clientWidth 返回元素的可见宽度
        clientHeight 返回元素的可见高度

    • 元素属性的应用

      • document.documentElement.scrollTop;//标准浏览器

      • document.documentElement.scrollLeft;//标准浏览器

      • 或者

      • document.body.scrollTop;//Chrome

      • document.body.scrollLeft;//Chrome

      • var sTop=document.documentElement.scrollTop||document.body.scrollTop;
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 198,932评论 5赞 466
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,554评论 2赞 375
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 145,894评论 0赞 328
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,442评论 1赞 268
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,347评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,899评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,325评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,980评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,196评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,163评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,085评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,826评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,389评论 3赞 302
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,501评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,753评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,171评论 2赞 344
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,616评论 2赞 339

推荐阅读更多精彩内容

  • JavaScript
    一、JS前言 （1）认识JS 也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HT...
    凛0_0阅读 2,749评论 0赞 8
  • JavaScript进阶
    第1章 认识JS JavaScript能做什么？1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,232评论 0赞 5
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,039评论 0赞 3
  • DOM&BOM.1
    第一章 1.什么是DOM DOM: Document Object Model(文档对象模型) 是JavaScri...
    fastwe阅读 784评论 0赞 0
  • 書—陰符經
    臨帖 褚遂良《陰符經》第一遍
    芳心自同阅读 203评论 0赞 0