整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML DOM-事件

TML DOM 允许 JavaScript 对 HTML 事件作出反应。

实例

Mouse Over Me

Click Me

TML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。通过 DOM,你可以访问所有的 HTML 元素,连同它们所包含的文本和属性。

HTML DOM 模型被构造为对象的树:


查找 HTML 元素

//通过 id 查找 HTML 元素
var x=document.getElementById("intro");

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

//通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");

HTML DOM 改变 HTML 内容

//改变 HTML 输出流
document.write(Date());
//绝对不要在文档加载完成之后使用,用btn点击事件执行 document.write()。这会覆盖该文档。

//改变 HTML 内容
document.getElementById(id).innerHTML=new HTML

//改变 HTML 属性
document.getElementById(id).attribute=new value

HTML DOM 改变 CSS

//改变 HTML 样式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>

HTML DOM 事件

//对事件做出反应
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>


//HTML 事件属性
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点我</button>
<script>
function displayDate()
{
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>


//使用 HTML DOM 来分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};

//onchange 事件
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p>
</body>

HTML DOM 事件监听器

//addEventListener() 方法
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
</body>

//向原元素添加事件句柄
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

//向同一个元素中添加多个事件句柄
<body>
<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>
</body>

HTML DOM 元素

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

  1. nodeName : 节点的名称
  2. nodeValue :节点的值
  3. nodeType :节点的类型

创建新的 HTML 元素

<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的 HTML 元素

<body>
<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>


以上内容整理于网络,如有侵权请联系删除。

过 HTML DOM,您能够使用节点关系在节点树中导航。


HTML DOM 节点列表

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

下面的代码选取文档中的所有 <p> 节点:

实例

varx=document.getElementsByTagName("p");

可以通过下标号访问这些节点。如需访问第二个 <p>,您可以这么写:

y=x[1];

尝试一下 »

注意:

下标号从 0 开始。


HTML DOM 节点列表长度

length 属性定义节点列表中节点的数量。

您可以使用 length 属性来循环节点列表:

实例

x=document.getElementsByTagName("p");for(i=0;i<x.length;i++){document.write(x[i].innerHTML); document.write("<br>");}

实例解析:

  • 获取所有 <p> 元素节点

  • 输出每个 <p> 元素的文本节点的值


导航节点关系

您能够使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。

请看下面的 HTML 片段:

<html><head><metacharset="utf-8"></head><body><p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>这个实例演示了节点的关系。</p></div></body></html>

  • 首个 <p> 元素是 <body> 元素的首个子元素(firstChild)

  • <div> 元素是 <body> 元素的最后一个子元素(lastChild)

  • <body> 元素是首个 <p> 元素和 <div> 元素的父节点(parentNode)

firstChild 属性可用于访问元素的文本:

实例

<pid="intro">Hello World!</p><script>x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script>

尝试一下 »


DOM 根节点

这里有两个特殊的属性,可以访问全部文档:

  • document.documentElement - 全部文档

  • document.body - 文档的主体

实例

<p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>这个实例演示了 <b>document.body</b> 属性。</p></div><script>alert(document.body.innerHTML);</script>

尝试一下 »


childNodes 和 nodeValue

除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

下面的代码获取 id="intro" 的 <p> 元素的值:

实例

<pid="intro">Hello World!</p><script>txt=document.getElementById("intro").childNodes[0].nodeValue;document.write(txt);</script>

尝试一下 »

在上面的例子中,getElementById 是一个方法,而 childNodes 和 nodeValue 是属性。