1、BOM和DOM简述
BOM:指浏览器对象模型,它使JavaScript有能力与浏览器进行对话
DOM:指文档对象模型,通过它,可以访问HTML文档的所有元素
2、Window对象
所有浏览器都支持window对象,他表示浏览器窗口。
如果文档包含框架(frame或iframe标签),浏览器会为HTML文档创建一个window对象,并为每个框架创建一个额外的window对象
所有JavaScript全局对象,函数以及变量均自动成为window对象的成员
全局变量是window对象的属性。全局函数是window对象的方法
常用的window方法:
window.innerHeight ------ 浏览器窗口的内部高度
window.innerWidth ------- 浏览器窗口的内部宽度
window.open() ----- 打开新窗口
window.close() -------- 关闭当前窗口
3、Window的子对象
1、navigator对象
浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息
navigator属性值 | 叙述 |
navigator.appName | web浏览器全称 |
navigator.appVersion | web浏览器厂商和版本的详细字符串 |
navigator.userAgent(重要) | 客户端绝大部分信息 |
navigator.platform | 浏览器运行所在的操作系统 |
2、screen对象
屏幕对象,不常用。
screen对象属性:
screen.availWidth ---------- 可用的屏幕宽度
screen.availHeight ----------- 可用的屏幕高度
3、history对象
window.history对象包含浏览器的历史
浏览器历史对象,包含用户对当前页面的浏览历史,但我们无法查看具体的地址,可用简单的用来前进或后退一个页面
history属性值 | 概述 |
history.forward() | 前进一页 |
history.back() | 后退一页 |
4、location对象
window.location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面。
location属性值 | 概述 |
location.href | 获取当前网页的URL地址 |
location.href = 'URL' | 跳转到指定页面 |
location.reload() | 重新加载(刷新)当前页面 |
4、弹出框
1、警告框
警告框经常用于确保用户可以得到某些信息,警告框出现后,用户需点击确定按钮才能继续操作
语法:
alert("123")
2、确认框
确认框用于使用用户可以验证或接受某些信息,当确认框出现后,用户需要点击确定或取消按钮才能继续操作
用户点击确认返回ture,用户点击取消返回false
语法:
confirm("你确定吗?")
3、提示框
提示框经常用于提示用户在进入页面前输入某个值,当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
用户点击确认,那么返回值为输入的值,如果点击取消,那么返回值为null
语法:
prompt("请在下方输入,你的内容")
5、计时相关
通过使用JavaScript,我们就可以在一定时间间隔之后执行代码,而不是在函数被调用后立即执行,我们称之为计时事件
计时方法
1、setTimeout("JS语句",毫秒)
setTimeout:会在指定的时间内指定某个JS语句的方法,并且只执行一次
2、clearTimeout(setTimeout_varible)
clearTimeout:取消setTimeout设置
2、setInterval("JS语句",时间间隔)
setInterval:按照指定的时间间隔执行JS语句中的方法,时间间隔一到就执行一次,会不停的调用函数,直到被clearInterval关闭
3、clearInterval(setInterval返回的id值)
clearInterval:取消setInterval设置的timeout
DOM
DOM是一套对文档的内容进行抽象和概念化的方法,当页面被加载时,浏览器会创建页面的文档对象模型
DOM标准规定HTML文档中的每个成分都是一个结点:
文档结点(document对象):代表整个文档
元素结点(element对象):代表一个元素(标签)
文本结点(text对象):代表元素(标签)中的文本
属性结点(attribute对象):代表一个属性,元素(标签)才有属性
注释是注释结点(comment对象)
DOM树
6、查找标签
1、直接查找
直接查找方法 | 说明 |
document.getElementById("id") | 根据ID获取一个标签 |
document.getElementsClassName() | 根据class属性获取 |
document.getElementsByTagName() | 根据标签获取标签合集 |
2、间接查找
间接查找方法:标签.方法 | |
parentElement | 父节点标签元素 |
children | 所有子标签 |
firstElementChild | 第一个子标签元素 |
lastElementChild | 最后一个子标签元素 |
nextElementSibling | 下一个兄弟标签元素 |
previousElementSibling | 上一个兄弟标签元素 |
7、结点操作
1、创建结点(创建标签)
语法:
create Element(标签名)
例:var div = document.createElement("div");
2、添加结点(增加属性)
语法:
使用点语法增加属性
例:var img = document.createElement("img"); 创建标签
img.src = "URL";
img.alt = "图片错误"
img.setAttribute("name","jack");
注意事项:
1、增加标签自带的属性时,可以使用点语法
2、增加自定义属性,不是标签自带的属性时,使用setAttribute()语法
补充:
获取一个属性:console.log(img.getAttribute('name'))
3、将结点增加到div中,在浏览器中显示
语法:
div.appendChild(img);
例:完整的一个创建标签到结束的全过程:
// 创建一个a标签出来 // 创建a标签 var a = document.createElement('a'); // <a></a> var div = document.getElementById('d1'); // 增加属性 a.href='http://www.baidu.com';// <a href='http://www.baidu.com'></a> a.title='点我解解困把';// <a href='http://www.baidu.com' title='点我解解困把'></a> a.setAttribute('username',' aaa'); a.getAttribute('username') // 增加文本内容 // a.innerText = '<h1>点我看美女</h1>';// <a href='http://www.baidu.com' title='点我解解困把'>点我看美女</a> a.innerHTML = '<h1>点我看美女</h1>';// <a href='http://www.baidu.com' title='点我解解困把'>点我看美女</a> console.log(a); div.appendChild(a);
4、删除结点(属性)
语法:
img.removeAttribute('你想删除的结点')
例:
var img = document.createElement("img"); 创建标签
img.src = "URL"; 增加结点
img.alt = "图片错误"; 增加结点
img.removeAttribute("alt"); 删除结点
5、替换结点(属性)
语法:
somenode.replaceChild(newnode,某个结点);
6、属性结点(属性)
获取文本结点的值
两种方法:
1、inner.Text:只生效文本,标签效果不生效
2、innerHTML:文本效果显示,标签的效果也生效
例:
获取文本结点的值:
var divEle = document.getElementById("d1")
divEle.innerText
div.Ele.innerHTML
设置文本结点的值:
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
7、获取值操作
语法:
elementNode.value
适用于一下标签:
1、.input
2、.selectm
3、.textarea
value不能获取文件数据,获取文件数据要用files
var iEle = document.getElementById("i1");
console.log(iEle.vaule);
var sEle = document.getElementById("s1");
console.log(sEle.vaule);
var tEle = document.getElementById("t1");
console.log(tEle.vaule);
8、class值操作
className 获取所有样式类名(字符串)
方法 | 说明 |
classList.remove(cls) | 删除指定类 |
classList.add(cls) | 添加类 |
classList.contains(cls) | 存在返回true,否则返回false |
classList.toggle(cls) | 存在就删除,否则添加 |
9、指定CSS操作
JS操作CSS规律:
1、对于没有中横线的CSS属性一般直接使用style.属性名即可
例如:
obj.style.margin:2px;
obj.style.width:2px;
obj.style.left:
obj.style.position:left 2px;
2、对于含有中横线的CSS属性。将中横线后面的第一个字母换成大写即可
例如:
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
8、事件
HTML4.0的新特性之一是有能力使HTML时间触发浏览器中的动作(action),比如当用户点击HTML元素时启动一段JavaScript。一下是一个属性列表,这些属性可插入HTML标签来定义时间动作
常用事件
属性 | 说明 | 使用场景 |
onclick | 当用户点击某个对象时调用的事件句柄 | |
ondblclick | 当用户双击某个对象时调用的事件句柄 | |
onfocus | 元素获得焦点 | 输入框 |
onblur | 元素失去焦点 | 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证 |
onchange | 域的内容被改变 | 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动) |
onkeydown | 键盘按键被按下 | |
onkeyup | 键盘按键被松开 | |
onkeypress | 键盘按键被按下并松开 | |
onload | 等待整个文档全部加载完毕之后,在执行onload里面的代码 | |
onmousedown | 鼠标按钮被按下 | |
onmousemove | 鼠标按钮被移动 | |
onmouseout | 鼠标从某元素移开 | |
onmouseover | 鼠标移动到某元素之上 | |
onselect | 在文本框中的文本被选中时发生 | |
onsubmit | 确认按钮被点击,使用的对象是form |
绑定方式
1、方式一
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(this){
this.style.backgroundColor="green";
}
</script>
/*
注意:
this是实参,表示触发事件的当前元素
函数定义过程中的this为形参
*/
2、方式二
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle.onclick=function(){
this.innerText="呵呵";
}
</script>