DOM 学习

时间 2019-12-21

标签 dom 学习栏目 HTML 繁體版

原文原文链接

Document Object Model (DOM)是HTML和XML文档的编程接口。它提供了上述文档的一种结构化表示，同时也定义了一种经过程序来改变文档结构，风格，以及内容的方式。javascript

DOM与BOM的关系：BOM包含DOM

html

文档根节点java

var de = document.documentElement;

好比,在chrome浏览器blank页面的控制台console.log(document.documentElement)打印出源码
node

console.log(de.tagName)//打印出根元素

获取body元素
var d1 = document.getElementsByTagName("body"); console.log(d1)

经常使用节点类型chrome

元素节点——文档中具备标签的节点
文本节点——标签中不是注释的文本块

经常使用的节点属性编程

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的全部属性所有打印出来了浏览器

方法总结：app

JavaScript→Dom就是C#→.Net Framwork。less

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>