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>

MichaelDuan
1.8k 声望39 粉丝

引用和评论

0 条评论