JavaScript分为ECNAScript,BOM, DOM
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。
DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。
Window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write()可以简写成:document.write()。
BOM
window对象
所有的浏览器都支持window对象,它表示浏览器接口。
如果文档包含框架(frame或ifram标签),浏览器回味HTML文档创建一个window对象,并为每个框架创建一个额外的 window 对象。
*没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
一些常用的Window方法:
-
window.innerHeight: 浏览器窗口内部高度
-
window.inner 浏览器窗口内部宽度
-
window.open(): 打开新窗口
-
window.close(): 关闭当前窗口
window的子对象
navigator对象
浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
screen对象
屏幕对象,不常用。
一些属性:
-
screen.availwidth : 可用的屏幕宽度
-
screen.availHeight:可用的屏幕高度
history对象
history 对象保存着用户上网的历史记录,使用 go()
方法可以在用户的历史记录中任意跳转,可以向后也可以向前。这个方法接受一个参数, 表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于单击浏览器的“后退”按钮),正数表示向前跳转(类似于单击浏览器的“前进”按钮)。 看例子:
history.forward() // 前进一页
history.back() // 后退一页
history.go(-1); //后退一页
history.go(1); //前进一页
history.go(2); //前进两页
location对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
常用属性和方法:
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
弹出框
可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
语法:
alert("你看到了吗?");
网页显示:你看到了吗?
确认框(了解即可)
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
语法:
confirm("你确定吗?")
网页提示:你确定吗?
提示框(了解即可)
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
语法:
prompt("请在下方输入","你的答案")
请在下方输入
`你的答案`
计时相关
通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout()
语法:
var t=setTimeout("JS语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数(1000 毫秒等于一秒)。
clearTimeout()
语法:
clearTimeout(setTimeout_variable)
举个例子:
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
setInterval()
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法:
setInterval("JS语句",时间间隔)
返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法:
clearInterval(setinterval返回的ID值)
举个例子:
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
查询字符串参数
虽然通过上面的属性可以访问到 location 对象的大多数信息,但其中访问 URL 包含的查询字符 串的属性并不方便。尽管 location.search 返回从问号到 URL 末尾的所有内容,但却没有办法逐个 访问其中的每个查询字符串参数。为此,可以像下面这样创建一个函数,用以解析查询字符串,然后返回包含所有参数的一个对象:
function getQueryStringArgs() { // ?username=mjj&pwd=18 // 1.取得查询字符串并去掉开头的问号 var qs = location.search.length > 0 ? location.search.substring(1) : ""; // 保存数据的对象 var args = {}; // 2.取得每一项 var items = qs.length ? qs.split('&'): []; var item = null,name = null,value = null; // 3.逐个将每一项添加到args对象中 for(var i = 0; i < items.length; i++){ item = items[i].split('='); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length) { args[name] = value; } } return args;}//假设地址查询参数为?name=zhangsan&age=18//另外还要考虑?,=,&编码的情况var args = getQueryStringArgs();console.log(args);//{name: "zhangsan", age: "18"}
位置操作
href属性
使用location对象可以通过很多方式来改变浏览器的位置.首先,也是最常用的方式通过href属性将其传递一个url
栗子:2秒之后跳转到小猿圈的web页面
setTimeout(function(){
location.href = 'https://www.apeland.cn/web';},2000)
当通过上述任何方式修改 URL 之后,浏览器的历史记录中就会生成一条新记录,因此用户通 过单击“后退”按钮都会导航到前一个页面。要禁用这种行为,可以使用 replace()方法。这个方法 只接受一个参数,即要导航到的 URL;结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记 录。在调用 replace()方法之后,用户不能回到前一个页面,
栗子:2秒之后跳转网页但不会产生历史记录
setTimeout(function(){ location.replace('https://www.apeland.cn/web');},2000)
DOM
DOM{Document(文档) Object(对象) Model(模型)}是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
HTML树
DOM标准规定HTML文档中的每个成分都是一个节点(node):
-
文档节点(document对象):代表整个文档
-
元素节点(element对象):代表一个元素(标签)
-
文本节点(text对象):代表元素标签中的文本
-
属性节点(attribute对象);代表一个属性,元素(标签)才有属性
-
注释是注释节点(comment对象)
JavaScript可以通过DOM创建动态的HTML:
-
JavaScript能够改变页面中的所有HTML元素
-
JavaScript能够改变页面中的所有HTML属性
-
JavaScript能够改变所有的CSS样式
-
JavaScript能够对页面占用的所有时间做出反应
查找标签
直接查找
document.getElementById 根据id获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByName 根据标签获取标签合集
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
创建节点
createTextNode()方法创建新的文本节点,返回新创建的Text节点
语法:
document.createTextNode(data);
参数:
data: 字符串值,可规定此节点的文本
例子:创建一个div并向其中添加一条消息:
var newNode = document.createElement('div');
var textNode = document.createTextNode('我是一条文本信息');
newNode.appendChild(textNode);
document.body.appendChild(newNode);
添加节点
语法:
追加一个子节点(作为最后的子节点)
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);
var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);
删除节点:
removeChild()方法从子节点列表中删除某个节点。如果删除成功,此方法可返回被删除的节点,如失败,则返回NULL
语法:
nodeObject.removeChild(node);
参数:
node:必需的,指定要删除的节点
例子:
替换节点:
replaceChild实现子节点(对象)的替换。返回被替换对象的引用
语法:
node.replaceChild(newnode,oldnew);
参数:
newnode:必需,用于替换的oldnew的对象
oldnew:必需,被newnode替换的对象
例子:
var oldnew = document.getElementById('text');var newNode = document.createElement('p');newNode.innerHTML = 'Vue';oldnew.parentNode.replaceChild(newNode,oldnew);
属性节点:
在文档对象模型(DOM)中,每一个节点都是一个对象。DOM节点有三个重要的属性:
-
nodeName: 节点的名称
-
nodeValue:节点的值
-
nodeType: 节点的类型
1.nodeName属性:节点的名称,是只读
-
元素节点的nodeName与标签名相同
-
属性节点的nodeName与属性的名称相同
-
文本节点的nodeName永远是#text
-
文档节点的nodeName永远是#document
2.nodeValue属性:节点的值
-
元素节点的 nodeValue 是 undefined 或 null
-
文本节点的 nodeValue 是文本自身
-
属性节点的 nodeValue 是属性的值
3.nodeType 属性: 节点的类型,是只读的。
以下常用的几种结点类型:
元素类型 | 节点类型 |
---|---|
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
验证
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>节点属性</title></head><body> <div id="box">我是一个文本节点<!-- 我是注释 --></div> <script type="text/javascript"> // 1.获取元素节点 var divNode = document.getElementById('box'); console.log(divNode.nodeName + '|' + divNode.nodeValue + "/" + divNode.nodeType); // 2.获取属性节点 var attrNode = divNode.attributes[0]; console.log(attrNode.nodeName + '|' + attrNode.nodeValue + "/" + attrNode.nodeType); // 3.获取文本节点 var textNode = divNode.childNodes[0]; console.log(textNode.nodeName + '|' + textNode.nodeValue + "/" + textNode.nodeType); // 4.获取注释节点 var commentNode = divNode.childNodes[1]; console.log(commentNode.nodeName + '|' + commentNode.nodeValue + "/" + commentNode.nodeType); // 5.文档节点 console.log(document.nodeName + '|' + document.nodeValue + "/" + document.nodeType); </script></body></html>
-
attributes
属性是获取到该节点对象上的所有属性的集合 -
childNodes
属性是获取到该节点对象的所有子节点的集合
innerText属性
仅仅对元素来获取或者设置该文本
newNode.innerText = 'mjj';console.log(newNode);//<p>mjj</p>
如果像在p标签插入一段<a>mjj</a>
,会发现<a>mjj</a>
它也会充当文本的来进行设置。
innerHTML属性
既可以设置文本又可以设置标签
newNode.innerHTML = '<a>mjj</a>'
注意:如果想获取节点对象的文本内容,可以直接调用innerText或者innerHTML属性来获取
1.getAttrbute()方法
getAttribute()方法只接收一个参数——你打算查询的属性的名字。
语法:
object.getAttribute(attributeName: DOMString)
比如上述案例,如何将p标签中的title属性打印出来?
var oP = document.getElementsByTagName('p')[0];var title = oP.getAttribute('title');console.log(title);
如果查询不到结果,则该调用则返回null,null是JavaScript语言中的空值,其含义是’你说的这个东西不存在‘
2.setAttribute()方法
setAttrbute()
方法它允许我们对属性节点的值做出修改。此方法传递两个参数。第一个参数为属性名,第二个参数为属性值
语法:
object.setAttribute(attribute,value)
例如:
var classList = document.getElementById('classList');classList.setAttribute('title','这是我们最新的课程');
获取值操作
语法:
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);
class的操作
className 获取所有样式类名(字符串) classList.remove(cls) 删除指定类 classList.add(cls) 添加类 classList.contains(cls) 存在返回true,否则返回false classList.toggle(cls) 存在就删除,否则添加
指定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
事件
常用事件
事件 | 说明 |
---|---|
onclick | 鼠标单击某个对象时调用的事件句柄 |
ondblclick | 鼠标双击某个对象时调用的事件句柄 |
onfocus | 元素获得焦点 |
onblur | 元素失去焦点:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. |
onchange | 文本框内容改变 |
onkeydown | 某个键盘按键被按下时。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘按键被松开 |
onload | 网页加载事件 |
onmousedown | 鼠标按钮按下 |
onmousemove | 鼠标移动 |
onmouseout | 鼠标从元素移开 |
onmouseover | 鼠标移动到元素上 |
onselect | 在文本框中的文本被选中时发生 |
onsubmit | 确认按钮被点击,使用的对象是form。 |
绑定方法
一:
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意:
this是实参,表示触发事件的当前元素。
函数定义过程中的this为形参。
二:
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>