Document Object Model (DOM)是HTML和XML文档的编程接口。它提供了上述文档的一种结构化表示,同时也定义了一种通过程序来改变文档结构,风格,以及内容的方式。
DOM与BOM的关系:BOM包含DOM
文档根节点
var de = document.documentElement;
比如,在chrome浏览器blank页面的控制台console.log(document.documentElement)打印出源码
console.log(de.tagName)//打印出根元素
获取body元素
var d1 = document.getElementsByTagName("body"); console.log(d1)
常用节点类型
元素节点——文档中具有标签的节点
文本节点——标签中不是注释的文本块
常用的节点属性
nodeType——节点类型,元素节点是1,文本节点是3
nodeValue——节点值,元素节点为空,文本节点的nodeValue属性即为文本内容
firstChild——该元素节点包含的第一个子节点
lastChild——该元素节点包含的最后一个子节点
nextSibling——该节点的后一个兄弟节点
previousSibling——该节点的前一个兄弟节点
childNodes——子节点列表,可以通过node.childNodes[index](或node.childNodes.item(index))来获取子节点
nodeName——节点名称,对于元素节点,返回tagName,对于文本,则返回#text
demo.html
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<div>
<p>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</p>
<button type='button' onclick='test()'>test</button>
</div>
<script type="text/javascript">
function test(){
alert('sometest')
}
</script>
</body>
</html>
firstChild:html文档的第一个元素head
lastChild 最后一个元素是body
使用节点类型检测,每个节点都有nodeType属性,指明它的节点类型。对于元素节点,它的值是1,而对于文本节点,它的值是3
console.log(document.documentElement.lastChild.nodeType)
console.log(document.documentElement.firstChild.nodeType)
获取属性
<li id='d1' style='font-size:100px;'>test1</li>
var d = document.getElementById('d1'); console.log(d.style)//将所有的style的所有属性全部打印出来了
方法总结:
JavaScript→Dom就是C#→.Net Framwork。
window对象:
alert方法,弹出消息对话框。
confirm方法,显示“确定”、“取消”对话框。
navigate方法,重新导航到指定的地址。
setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识
clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=False。因为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,即setInterval的返回值。
setTimeout也是定时执行,但是不像setInterval那样是重复的定时执行,只执行一次。
clearTimeout也是清除定时。
showModalDialog弹出模态对话框。
showModelessDialog弹出非模态窗口。
window.location.href='http://www.baidu.com',重新导向新的地址。
window.location.reload() 刷新页面。
window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。
clientX、clientY 发生事件时鼠标在客户区的坐标;
screenX、screenY 发生事件时鼠标在屏幕上的坐标;
offsetX、offsetY 发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标。
.srcElement,获得事件源对象。几个事件共享一个事件响应函数用。
keyCode,发生事件时的按键值。
button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按。
altKey属性,bool类型,表示发生事件时alt键是否被按下,类似的还有ctrlKey、shiftKey属性
screen对象,屏幕的信息
clipboardData对象,对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;setData("Text",val),设置粘贴板中的值。
【<input type="button" value="推荐给好友" onclick="clipboardData.setData('Text','推荐给你一个网站,很好玩'+location.href);alert('已经将网址放到粘贴板中,发给你的好友即可');"/>
重复帐号:<input type="text" onpaste="alert('为保证帐号的正确,请勿粘贴帐号');return false;" />】
【clipboardData.setData('Text', clipboardData.getData('Text') + '本文来rohelm博客,转载请注明来源。' + location.href);】
body对象的事件
onload:网页加载完毕时触发。
onunload:网页关闭(或者离开)后触发。
onbeforeunload:在网页准备关闭(或者离开)后触发。在事件中为"window.event.returnValue赋值(要显示的警告消息),这样窗口离开(比如前进、后退、关闭)就会弹出确认消息
document对象的事件
document.write('<font color=red>你好</font>');
getElementById方法,根据元素的Id获得对象,getElementsByName返回值是对象数组。
getElementsByTagName,获得指定标签名称的元素数组.
createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下。
<doctype html>
<html>
<head>
<title>遍历对象,动态添加</title>
<meta charset='utf-8'>
</head>
<body>
<input type="button" onclick="test()" value="生成列表"/>
<div id="news"></div>
</body>
<script type="text/javascript">
function test(){
var di = document.getElementById('news')
var ta = document.createElement('table')
ta.border = 1;
var obj = {'1':'no','2':'arr','3':'fdsfaed'}
for(var i in obj){
var tr = document.createElement('tr')
var td = document.createElement('td')
td.innerHTML=i
tr.appendChild(td)
ta.appendChild(tr)
var td2 = document.createElement('td')
td2.innerHTML=obj[i]
tr.appendChild(td)
tr.appendChild(td2)
ta.appendChild(tr)
}
di.appendChild(ta)
}
</script>
</html>
getAttribut/getAttribut
<doctype html>
<html>
<head>
<title>set/getAttribute</title>
<meta charset='utf-8'>
</head>
<body>
<div id='d1'>test1</div>
<button type='button' onclick='test()'>testBtn</button>
</body>
<script type="text/javascript">
function test(){
var prop = document.getElementById('d1')
alert(prop.getAttribute('id'))
prop.setAttribute('title','none')
alert(prop.getAttribute('title'))
}
</script>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。