"

目录

#. window对象介绍

#. window子对象

1. 浏览器对象 navigator

2. 屏幕对象 screen

3. 历史 history

4. 地址(URL)  location

5. 弹出框

/. 警告框 alert

/. 确认框 confirm

/. 提示框 prompt

6. 计时相关

/. 一次性 setTimeout()

/. 周期性 setInterval()

#. DOM

1. 查找标签 document

/. 直接查找

/. 间接查找

2. 节点操作

/. 创建节点

/. 添加节点

/. 删除节点

/. 替换节点

/. 属性节点

/. attribute 操作

3. 获取值操作

4. class 操作

5. 指定CSS属性

#. 事件


#. window对象介绍

JavaScript分为:ECMAScript、DOM、BOM.

  • BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行"对话".
  • DOM(Document Object Model)是指文档对象模型,通过它可以访问HTML文档的所有元素.

window对象是客户端的JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例:window.document.write() 可简写为:document.write()

所有浏览器都支持window对象。它表示浏览器窗口。

如果文档包含框架(frame 或 iframe 标签),浏览器会为HTML文档创建一个window对象,并为每个框架创建一个额外的window对象。

没有应用于window对象的公开标准,不过所有浏览器都支持该对象。

所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。

全局对象是window对象的属性,全局函数是window对象的方法。

一些常用的window方法:

  • innerHeight:浏览器窗口的内部高度
  • innerWidth:浏览器窗口的内部宽度
  • open():打开新窗口
  • close():关闭当前窗口

#. window子对象

1. 浏览器对象 navigator

用于判断用户所使用的浏览器,包含了浏览器相关信息.

  • appName:Web浏览器全称
  • appVersion:Web浏览器厂商和版本的详细字符串
  • userAgent:客户端绝大部分信息
  • platform:浏览器运行所在的操作系统

如下:

2. 屏幕对象 screen

获取屏幕的高度和宽度,不常用.

  • availWidth:可用的屏幕宽度
  • availHeight:可用的屏幕高度

3. 历史 history

包含了用户对浏览器当前页面的浏览历史,不可直接查看,只可前进或后退.

  • forward():前进一页
  • back():后退一页

4. 地址(URL)  location

用于获得当前页面的地址(URL),并把浏览器重新定向到新的页面.

  • href:获取URL
  • href = "URL":跳转到指定页面
  • reload():重新加载页面

5. 弹出框

弹出框分三种:警告框、确认框、提示框

/. 警告框 alert

警告框经常用于确认用户可以得到某些信息.

当警告框出现后,用户需要点击确认按钮才能继续进行操作.

如下:

/. 确认框 confirm

用于确认用户接收或拒绝某些信息.

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作.

如果用户点击确认,那么返回值为true;如果用户点击取消,那么返回值为flase.

如下:

/. 提示框 prompt

提示框经常用于提示用户在进入页面前输入某个值.

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵.

如果用户点击确认,那么返回值为输入的值;如果用户点击取消,那么返回值为null.

如下:

6. 计时相关

通过使用JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件.

/. 一次性 setTimeout()

语法:var t = setTimeout("JS语句", 毫秒);

此方法会返回某个值,值被存储在计时对象 t 中.

第一个参数是含有JavaScript语句的字符串,这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用.

第二个参数指示从当前起多少毫秒后执行第一个参数(1000毫秒 == 1秒).

可用 clearTimeout(setTimeout返回的ID值) 取消此方法.

如下:

/. 周期性 setInterval()

语法:setInterval("JS语句", 时间间隔);

此方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.

此方法会不停地调用函数,直到窗口被关闭或执行clearInterval()方法取消计时.

可用 clearInterval(
setInterval返回的ID值) 取消此方法.

如下:


#. DOM

DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法.

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).

HTML DOM 模型被构造为对象的树:




DOM标准规定HTML文档中的每个成分都是一个节点(node):

  • 文档节点(document对象):代表整个文档
  • 元素节点(element对象):代表一个元素(标签)
  • 文本节点(text对象):代表元素(标签)中的文本
  • 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
  • 注释是注释节点(comment对象)

JavaScript可以通过DOM创建动态的HTML:

  1. JavaScript 能够改变页面中的所有 HTML 元素
  2. JavaScript 能够改变页面中的所有 HTML 属性
  3. JavaScript 能够改变页面中的所有 CSS 样式
  4. JavaScript 能够对页面中的所有事件作出反应

1. 查找标签 document

HTML文件为:

/. 直接查找

  • getElementById:根据ID获取一个标签:

  • getElementsByClassName:根据class属性获取标签:

  • getElementsByTagName:根据标签名获取标签:

/. 间接查找

属性 描述
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

简单示例:

2. 节点操作

/. 创建节点

语法:var divEle = document.createElement('div');

/. 添加节点

  • oldNode.appendChild(newNode):在newNode标签中追加一个子节点
  • oldNode.insertBefore(newNode,oldNode2):把newNode节点添加到oldNode2节点的前面,oldNode是父节点

简单示例:

/. 删除节点

通过父标签删除子标签.

语法:父节点.removeChild(子节点);

/. 替换节点

通过父标签替换子标签.

语法:父节点.replaceChild(新节点, 旧节点);

/. 属性节点

  • 节点.innerText = "新字符串"; :设置节点字符串,如果已有,则更改

  • 父节点.innerHTML = "新节点"; :添加子节点,如果已有子节点,则全部替换




    此方法还可同时添加字符串:

/. attribute 操作

  • 节点.setAttribute('age', 19); :添加节点属性
  • 节点.setAttribute('age'); :获取节点属性
  • 节点.removeAttribute('age'); :删除节点属性

简单示例:




此外,节点自带的属性还可以通过 父节点.属性名 = "值" 的方式来获取或设置.

3. 获取值操作

语法:节点.value;
适用标签:input、select、textarea

简单示例:

4. class 操作

用于对节点的类名进行操作.

  • 节点.className:获取所有样式类名(字符串)
  • 节点.classList.remove("类名"):删除指定类名
  • 节点.classList.add("类名"):添加指定类名
  • 节点.classList.contains("类名"):判断类名是否存在,存在返回true,否则false
  • 节点.classList.toggle("类名"):存在就删除,否则添加

简单示例:

5. 指定CSS属性

对于没有中横线的CSS属性,一般直接使用style.属性名即可.

对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可.

简单示例:


#. 事件

HTML 4.0 的新特性之一是有能力使HTML事件触发浏览器中的动作(action),比如当用户单击某个HTML元素时启动一段JavaScript。下面是一个属性列表,这些属性可插入HTML标签来定义事件动作。

onclick:当用户单击某个对象时调用的事件句柄

ondblclick:当用户双击某个对象时调用的事件句柄

onfocus:元素获得焦点(比如输入框)

onblur:元素失去焦点(用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证)

onchange:域的内容被更改(通常用于表单元素,当元素内容被改变时触发。比如select联动)

onkeydown:某个键盘按键被按下(当用户在最后一个输入框按下回车键时,表单提交)

onkeypress:某个键盘按键被按下并松开

onkeyup:某个键盘按键被松开

onload:一张页面或一副图像完成加载

onmousedown:鼠标按钮被按下

onmousemove:鼠标被移动

onmouseout:鼠标从某元素移开

onmouseover:鼠标移到某元素之上

onselect:在文本框中的文本被选中时发生

onsubmit:确认按钮被点击,使用的对象是form

简单示例:


  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>事变</title>
  8. </head>
  9. <body>
  10. <!--方式1-->
  11. <div onclick="changeColor(this);">单击</div>
  12. <script>
  13. function changeColor(ths) {
  14. ths.style.color = "green"; // 单击时改变颜色
  15. ths.style.fontSize = "200%"; // 单击时放大字体
  16. }
  17. </script>
  18. <!--需要注意的是:this 是实参,表示触发事件的当前元素;函数定义过程中的 ths 为形参-->
  19. <!--方式2-->
  20. <div id="id">双击</div>
  21. <script>
  22. var idEle = document.getElementById("id");
  23. idEle.ondblclick = function () {
  24. this.innerText = "更换文本"; // 双击时更换文本
  25. }
  26. </script>
  27. </body>
  28. </html>

进阶:select联动


  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta http-equiv="content-Type" charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">
  7. <title>联动</title>
  8. </head>
  9. <body>
  10. <div>
  11. <label for="i1">省</label>
  12. <select name="" id="i1">
  13. <option value="">-请选择省-</option>
  14. </select>
  15. <label for="i2">市</label>
  16. <select name="" id="i2"></select>
  17. </div>
  18. <script>
  19. var data = {
  20. "昌平": ["西二旗", "上帝", "沙河"],
  21. "太阳系": ["火星", "地球", "月球"],
  22. // ...
  23. };
  24. var i1Ele = document.getElementById("i1");
  25. var i2Ele = document.getElementById("i2");
  26. // 1. 拿到所有的省,在i1中生成对应的option选项
  27. for (var i in data) {
  28. // 1.1 创建option标签
  29. var tmp = document.createElement("option");
  30. // 1.2 把省信息添加到option标签中
  31. tmp.innerText = i;
  32. // 1.3 把创建好的option标签插入到第一个select标签中
  33. i1Ele.appendChild(tmp);
  34. }
  35. // 以下操作当用户选中某个省之后被触发
  36. i1Ele.onchange = function (ev) {
  37. // 0. 清空第二个select框的option
  38. i2Ele.innerHTML = "";
  39. // 1. 获取用户选中的省
  40. var p = this.value;
  41. // 2. 根据用户选择的省,去data中找省对应的城市数据
  42. var cityArray = data[p];
  43. // 3. 遍历所有的城市数据,给第二个select框添加option选项
  44. for (var ii in cityArray) {
  45. // 3.1 创建第二个option标签
  46. var tmp = document.createElement("option");
  47. // 3.2 给option添加文本
  48. tmp.innerText = cityArray[ii];
  49. // 3.3 把生成的option追加到第二个select标签中
  50. i2Ele.appendChild(tmp);
  51. }
  52. }
  53. </script>
  54. </body>
  55. </html>


"

【前端之BOM和DOM】的更多相关文章

  1. 前端(4)BOM与DOM

    前端(4)BOM与DOM I/O前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交 ...

  2. 第四章、前端之BOM和DOM

    目录 第四章.前端之BOM和DOM 一.解释BOM和DOM 二.window对象 三.window子对象 四.弹出框 五.计时相关 六.HTML的DOM树 七.查找元素 八.节点操作 九.JS操作CS ...

  3. 04 前端之BOM与DOM

    目录 前端之BOM与DOM BOM与DOM操作 BOM操作 前端之BOM与DOM BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>& ...

  4. 前端之BOM和DOM

    BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”. DOM(Document Object Model)是指 ...

  5. 前端基础-BOM和DOM的介绍

    阅读目录 BOM和DOM的简述 DOM详细操作 事件 一.BOM和DOM的简述 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我 ...

  6. 前端基础BOM和DOM

    前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  7. 前端基础-BOM和DOM学习

    JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...

  8. 前端之BOM,DOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  9. 前端 --- 5 BOM 和 DOM

    一.BOM BOM(Browser Object Model)是指浏览器对象模型, 它使 JavaScript 有能力与浏览器进行“对话”. 1. window 对象 一些常用的Window方法: ( ...

  10. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

随机推荐

  1. Whctf 2017 -UNTITLED- Writeup

    Whctf 2017 -UNTITLED- Writeup 转载请表明出处http://www.cnblogs.com/WangAoBo/p/7541481.html 分析: 下载下来的附件是一个py ...

  2. mysql查询速度慢的分析和解决

    一.定位执行慢的sql,如2秒内没执行完的抽取出来 show engines;查看慢查询时间show variables like 'slow%';查看设置多久是慢查询show variables l ...

  3. 在centos7下获取git代码(部署代码)

    一.准备好账号 现在我们写的前端页面都放在公司自己搭建的gitlab上,使用的是 SSH KEY 访问的,所以我们先注册了一个账号 "1374669657@qq.com" . 二. ...

  4. Scale9Sprite不要在初始化的时候setCapInsets

    let scale9Sprite = new ccui.Scale9Sprite(filePath);scale9Sprite.setCapInsets(cc.rect(x,y,w,h)); 而非 l ...

  5. JQuery/JS插件 jsTree加载树,普通加载,点一级加载一级

    前端: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  6. 使用c#做前台页面

    1.有很多组件,组件右属性,事件 2.在table中,操作用的是图片 3.打开dialog时,其他窗体不能使用 4.在子窗体编辑完,对后台操作后,在父窗体加载一下数据

  7. IIS7.x经典模式与集成模式

    参考文档:http://book.51cto.com/art/200908/146143.htm 个人理解: 经典模式: 在IIS6中aspnet_isapi.dll只是ISAPI的一个实现,对asp ...

  8. jenkins新建任务详解

    一.新建任务 点击左侧新建任务 输入任务名称-->选择构建一个自由风格的软件项目-->确认 进入任务配置页面 二.基本配置 General 配置构建保留天数,保留个数,必要时并发构建 源码 ...

  9. python 小故事1

    def test(a:str,b:int)->str: print(test.__annotations__) return a+str(b) def doc_print(): "&q ...

  10. 利用Xshell5从本机上向Linux(虚拟机中)上传文件

    Xmanager Enterprise 5云盘分享:  http://pan.baidu.com/s/1jIkiQNW 1. 用ifconfig命令查看Linux的IP地址 2. 由于没有IP,所以我 ...