web前端基础之BOM和DOM

一、介绍

JavaScript分为ECMAScript,DOM,BOM。

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

DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。

二、window对象

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

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

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

接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

一些常用的Window方法:

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.open() - 打开新窗口

window.close() - 关闭当前窗口

三、window的子对象

1、navigator对象

浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。

navigator.appName       // Web浏览器全称

navigator.appVersion   // Web浏览器厂商和版本的详细字符串

navigator.userAgent    // 客户端绝大部分信息

navigator.platform    // 浏览器运行所在的操作系统

2、screen对象(屏幕对象,不常用)

一些属性:

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

3、history对象

window.history 对象包含浏览器的历史。

浏览历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体的地址,可以简单的用来前进或后退一个页面。

history.forward()  // 前进一页

history.back()  // 后退一页

4、location对象

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

常用属性和方法:

location.href                获取URL

location.href="URL"    // 跳转到指定页面

location.reload()          重新加载页面

5、弹出框

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

(1)警告框

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

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

语法:

alert("页面危险!");

(2)确认框(了解即可)

确认框用于使用户可以验证或者接受某些信息。

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

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

语法:

confirm("你确定吗?")

(3)提示框(了解即可)

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

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

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

语法:

prompt("请在下方输入","你的答案")

6、计时相关

(1)setTimeout()

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

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

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

第二个参数指示从当前起多少毫秒后执行第一个参数。

(2)clearTimeout()

clearTimeout(setTimeout_variable)

举个例子:
var timer = setTimeout(function(){alert(123);}, 3000)         // 在指定时间之后执行一次相应函数
clearTimeout(timer);                                         // 取消setTimeout设置

(3)setInterval()

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

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:

setInterval("JS语句",时间间隔)

(4)clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法:

clearInterval(setinterval返回的ID值)

举个例子:
var timer = setInterval(function(){console.log(123);}, 3000)     // 每隔一段时间就执行一次相应函数
clearInterval(timer);                                           // 取消setInterval设置

示例:定时器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>定时器</title>
  <script>
    var intervalId;
    function f() {
      var timeStr = (new Date()).toLocaleString();
      var inputEle = document.getElementById("i1");
      inputEle.value = timeStr;
    }
    function start() {
      f();
      if (intervalId === undefined) {
        intervalId = setInterval(f, 1000);
      }
    }
    function end() {
      clearInterval(intervalId);
      intervalId = undefined;
    }
  </script>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="开始" id="start" onclick="start();">
<input type="button" value="结束" id="end" onclick="end();">
</body>
</html>

四、DOM

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

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

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

1、查找标签

(1)直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

注意:

涉及到DOM操作的JS代码应该放在文档的哪个位置。

(2)间接查找

parentElement            父节点标签元素

children                 所有子标签

firstElementChild        第一个子标签元素

lastElementChild         最后一个子标签元素

nextElementSibling       下一个兄弟标签元素

previousElementSibling   上一个兄弟标签元素

2、节点操作

(1)创建节点(重要内容)

语法:

createElement(标签名)

示例:

var divEle = document.createElement("div");

(2)添加节点

语法:

somenode.appendChild(newnode);                     //追加一个子节点(作为最后的子节点)
somenode.insertBefore(newnode,某个节点);            //把增加的节点放到某个节点的前边。
示例:
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

(3)删除节点

语法:

获得要删除的元素,通过父元素调用删除。

removeChild(要删除的节点)

(4)替换节点

语法:

somenode.replaceChild(newnode, 某个节点);

(5)属性节点

获取文本节点的值:

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

设置文本节点的值:

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

自带的属性还可以直接.属性名来获取和设置

imgEle.src

imgEle.src="..."

(6)获取值操作

语法:

elementNode.value

适用于以下标签:

.input

.select

.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

(7)class的操作

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类

classList.add(cls)  添加类

classList.contains(cls)  存在返回true,否则返回false

classList.toggle(cls)  存在就删除,否则添加

(8)指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律:

#1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:

obj.style.margin

obj.style.width

obj.style.left

obj.style.position

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

obj.style.marginTop

obj.style.borderLeftWidth

obj.style.zIndex

obj.style.fontFamily

五、事件

1、常用事件

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

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

onfocus        元素获得焦点。               // 练习:输入框

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

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

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

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

onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。

onmousemove    鼠标被移动。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。

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

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

2、绑定方式:

(1)方式一:

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>
注意:
this是实参,表示触发事件的当前元素。
函数定义过程中的ths为形参。

(2)方式二:

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="你好";
  }
</script>

3、示例

(1)搜索框

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title> 搜索框示例 </title>
</head>
<body>
    <input id = "d1" type = "text" value = "请输入关键字" onblur = "blurs()" onfocus = "focus()">
<script>
function focus(){
    var inputEle = document.getElementById("d1");
    if (inputEle.value == = "请输入关键字"){
        inputEle.value = "";
    }
}
function blurs(){
    var inputEle = document.getElementById("d1");
    var val = inputEle.value;
    if (!val.trim()){
        inputEle.value = "请输入关键字";
    }
}
</script>
</body>
</html>

(2)select联动

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</title>
</head>
<body>
<select id="province">
  <option>请选择省:</option>
</select>
<select id="city">
  <option>请选择市:</option>
</select>
<script>
  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
  var p = document.getElementById("province");
  var c = document.getElementById("city");
  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    c.options.length = 0;
    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

原文地址:http://blog.51cto.com/qidian510/2088311

时间: 2024-10-12 12:56:57

web前端基础之BOM和DOM的相关文章

前端基础之BOM和DOM:

目录 前端基础之BOM和DOM 前言 window对象 BOM与DOM操作 DOM学习流程 一些常用的Window方法: window的子对象 navigator对象(了解即可) screen对象(了解即可) history对象(了解即可) location对象 弹出框 计时相关 DOM HTML DOM 树 查找标签 直接查找 间接查找 节点操作 创建节点 添加节点 删除节点: 替换节点: 获取值操作 对类属性操作 class的操作 指定CSS操作 事件 常用事件 绑定方式: window.o

30.Python前端基础之BOM和DOM

前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知识. JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”. DOM (Document Object Model)是指文档对象模型,通过它,可以访问HT

前端基础之BOM和DOM

核心知识点: 1.BOM(浏览器窗口对象模型) DOM(文本对象模型) 2.window对象是客户端JavaScript最高层对象之一,属于全局对象,一般书写可以省略 3.window对象常用的方法 (1)窗口对象方法 (2)子对象方法 a.navigator对象(一般用于读取浏览器信息) b.screen对象 c.history对象(forward back go) d.location对象(reload href) 4.DOM:是一套对文档抽象和概念化的一种方法,可以说是一个应用程序接口 5

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

Web 前端基础

HTML 基础语法 CSS基础语法 JavaScript 基础语法 JavaScript BOM,DOM部分 JQuery基础语法 Bootstrap基础语法 JSON AJAX基础 Vue.js基础 补充: HTML5音频 HTML5视频 CSS3边框border-radius,box-shadow text-shadow 文字阴影 CSS过度 transtion 禁用a标签的几种方法 meta标签和JS实现页面刷新和重定向 JS实现跳转到一个url 常用web框架官网 JS作用域 原文地址:

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2.<head></head>用于封装位于文档头部的其他标签 属性: (1) dir:文本的显示方向 (2)  Lang:语言信息 (3)  Prof

web前端基础知识学习网站推介

内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.

前端基础之BMO和DOM

一:基础概念 BOM:指浏览器模型 使得JS能够与浏览器进行交流 DOM:指文档对象模型 通过它可以访问HTML所有的文档元素 二:window窗口 (1)所有浏览器都支持 window 对象.它表示浏览器窗口. (2)*如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象. (3)*没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象. (4)所有 JavaScript 全