JavaScript HTML DOM

HTML DOM

经过HTML DOM (文档对象模型)，可访问 JavaScript HTML 文档的全部元素。连同它们所包含的文本和属性。

当网页被加载时，浏览器会建立页面的文档对象模型。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

查找 HTML 元素

经过ID查找HTML元素：document.getElementById("ID")

经过标签名查找HTML元素：var x=document.getElementById("main");    var y=x.getElementsByTagName("p");

经过类名查找HTML元素：document.getElementsByClassName("class");

css中不少带-的属性，js中不能使用-，用首字母大写 替代！

HTML DOM 改变 HTML 内容

改变 HTML 输出流

docoument.write();可用于直接向 HTML 输出流写内容。      document.write(Date());  //输出日期   

绝对不要在文档加载完成以后使用 document.write()。这会覆盖该文档！！！

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML属性。document.getElementById(id).innerHTML=new HTML；

改变 HTML 属性

document.getElementById(id).属性=new value；

 

HTML DOM 改变 CSS

 

改变 HTML 样式

document.getElementById(id).style.样式=“new style“”；   新样式必须带双引号或者单引号！！！

 

 

HTML DOM 事件

对事件作出反应

onclick：用户点击HTML元素

onchangge：HTML元素发生改变时             常结合对输入字段的验证来使用。

onmouseover：移动鼠标到某个点

onmouseout：鼠标移出某个点

onkeydown：按下鼠标按键

onload：浏览器完成页面加载

onunload ：当用户离开页面时发生的事件(经过点击一个链接，提交表单，关闭浏览器窗口等等。)    一样触发了页面载入事件。

onmousedown：鼠标点击时

onmouseup：鼠标松开时

onfoucs：得到焦点时。

HTML 事件属性

onclick="displayDate()"

使用 HTML DOM 来分配事件

向 button 元素分配 onclick 事件：         document.getElementById("myBtn").onclick=function(){displayDate()}; 

 

 

JavaScript HTML DOM EventListener

 

addEventListener() 方法

当用户点击按钮时触发监听事件：事件名加双引号！！！    document.getElementById("ID").addEventListener("事件名", 函数名);  至关于在HTML中添加onclick=“函数名（）”

document.getElementById("ID").addEventListener("事件名", 函数名); function 函数名（）{}       //这样能够引用外函数

document.getElementById("ID").addEventListener("事件名", function （）{});     //这样不须要写函数名。

addEventListener()向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。能够向一个元素添加多个同类型或不一样类型事件句柄。

 document.getElementById("ID").addEventListener("click”, 函数名);  

 document.getElementById("ID").addEventListener("mouseover", 函数名);  //添加多个就写两次。

当使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也能够添加事件监听。

事件冒泡或事件捕获

事件传递定义了元素事件触发的顺序。 若是你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 

false ：默认的 在冒泡中，内部元素的事件会先被触发，而后再触发外部元素，即： <p> 元素的点击事件先触发，而后会触发 <div> 元素的点击事件。

true ：在捕获中，外部元素的事件会先被触发，而后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，而后再触发 <p> 元素的点击事件。

 

removeEventListener() 方法移除事件的监听。 

document.getElementById("ID").addEventListener(事件名, 函数名, 布尔值);

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

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

 

向 Window 对象添加事件句柄

在监听以前添加window。例：

window.addEventListener("resize",function（）{document.getElementById("id").innerHTML = Math.random( ); } );    当窗口大小改变时添加监听。随机数

 

 

传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：

document.getElementById("id").addEventListener("click", function(){ 函数名(p1, p2); });

 

 

 

 

跨浏览器解决方法:

兼容IE8：addEventListener换为attachEvent   事件名 加上on  

var x = document.getElementById("ID"); 
if (x.addEventListener) {                    // 全部主流浏览器，除了 IE 8 及更早版本 
    x.addEventListener("click", myFunction); 
} else if (x.attachEvent) {                  // IE 8 及更早版本 
    x.attachEvent("onclick", myFunction); 
}

 

 

 

 

HTML DOM 元素

JavaScript HTML DOM 元素(节点)      

在文档对象模型 (DOM) 中，每一个节点都是一个对象。DOM 节点有三个重要的属性，分别是：

nodeName:节点的名称   nodeValue ：节点的值       nodeType:节点的类型

 

 

建立新的 HTML 元素

必须首先建立该元素（元素节点），而后向一个已存在的元素追加该元素。

var para=document.createElement("p");                                           //这段代码建立新的<p> 元素
var node=document.createTextNode("这是一个新段落。");             //如需向 <p> 元素添加文本，您必须首先建立文本节点。这段代码建立了一个文本节点：
para.appendChild(node);                                                                  //向 <p> 元素追加这个文本节点：
var element=document.getElementById("div1");                              //向一个已有的元素追加这个新元素。这段代码找到一个已有的元素：

element.appendChild(para);                                                             //代码在已存在的元素后添加新元素

 

 

删除已有的 HTML 元素

var parent=document.getElementById("div1");                              //找到 id="div1" 的元 素：
var child=document.getElementById("p1");                                   //找到 id="p1" 的 <p> 元素：
parent.removeChild(child);                                                             //从父元素中删除子元素

DOM 须要清楚您须要删除的元素，以及它的父元素。

解决方案：

找到您但愿删除的子元素，而后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1"); child.parentNode.removeChild(child);