学习笔记：HTML DOM(文档对象模型)

来源：互联网发布：replay直播软件编辑：程序博客网时间：2024/05/22 14:14

1.DOM 树

HTMLDOM 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTMLDOM 模型被构造为对象的树：

DOM HTML tree

2.通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的HTML。

JavaScript能够改变页面中的所有 HTML 元素
JavaScript能够改变页面中的所有 HTML 属性
JavaScript能够改变页面中的所有 CSS 样式
JavaScript能够对页面中的所有事件做出反应

3.查找HTML元素

通过 id 找到 HTML 元素

通过标签名找到 HTML 元素

通过类名找到 HTML 元素

varx=document.getElementById("main");
vary=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：'+ y[0].innerHTML);

4.改变 HTML 样式

document.getElementById("p2").style.color="blue";

5.HTML DOM 允许您使用 JavaScript 来向 HTML元素分配事件：

document.getElementById("myBtn").onclick=function(){displayDate()};

6.onload 和 onunload 事件

onload 和 onunload事件会在用户进入或离开页面时被触发。
onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload事件可用于处理 cookie。
<body onload="checkCookies()">

7.addEventListener()方法

addEventListener()方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如：HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。

element.addEventListener(event,function, useCapture);
第一个参数是事件的类型 (如"click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

1）document.getElementById("myBtn").addEventListener("click", displayDate);

注意:不要使用 "on" 前缀。例如，使用 "click",而不是使用 "onclick"。

2）你可以向一个元素添加多个事件句柄

element.addEventListener("mouseover",myFunction);
element.addEventListener("click",mySecondFunction);
element.addEventListener("mouseout",myThirdFunction);

3）你可以向同个元素添加多个同类型的事件句柄，后添加的不会覆盖已存在的事件。如：两个"click" 事件。

element.addEventListener("click",myFunction);
element.addEventListener("click",mySecondFunction);
两个function都会执行

4）你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML元素。如：window 对象。

window.addEventListener("resize",function(){
document.getElementById("demo").innerHTML= sometext;
});
当用户重置窗口大小时添加事件监听

5）你可以使用 removeEventListener() 方法来移除事件的监听。
6）当需要传递参数值时，使用"匿名函数"调用带参数的函数：

element.addEventListener("click",function(){ myFunction(p1, p2); });

7）事件传递有两种方式：冒泡与捕获

事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素：
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div>元素的点击事件。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件

8.JavaScript HTML DOM 元素(节点)

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>
----------------------------------------------------------------------------------------------
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
----------------------------------------------------------------------------------------------
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

0 0