JavaScript HTML DOM

最新推荐文章于 2024-12-14 09:00:00 发布

原创最新推荐文章于 2024-12-14 09:00:00 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #DOM

JavaScript 专栏收录该内容

67 篇文章

订阅专栏

本文介绍如何使用HTMLDOM进行页面元素的查找、修改及事件处理，包括通过ID、类名、标签名查找元素，利用innerHTML属性改变HTML内容，通过属性方法修改元素属性，使用style属性改变CSS样式等。

通过HTML DOM,可访问JavaScript HTML文档中所有的元素。
当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)
这里写图片描述
1.查找HTML元素
通过id找到HTML元素

var x=document.getElementById("div1");//如果找到，该方法以对象的形式返回该元素。未找到，x的值为null

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
通过标签名找到HTML元素
通过类名找到HTML元素
2.改变HTML
输出

<script>
document.write(Date());
</script>

不要在文档加载之后使用document.write(),这样会覆盖之前网页的内容。
内容
改变HTML的内容最简单的方法innerHTML属性

document.getElementById("p1").innerHTML="New text!";

属性
通过attribute改变属性

<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>  
<script> 
// attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]”，
var d = document.getElementById("sss").attributes["value"];  
document.write(d.name);  //属性名
document.write(d.value);  //属性值
//显示value aaa  
</script>

<script>
document.getElementById("image").src="landscape.jpg";
</script>

2.改变css

//基本语法
document.getElementById(id).style.property=new style

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

//点击文本变为红色
<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
点击这里！</button>

3.事件

//点击改变文本
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)//通过this传递
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

分配事件
//通过事件属性分配事件
//向button元素分配onclick事件

<button onclick="displayDate()">点击这里</button>

//通过HTML DOM来分配事件

// displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

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

<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("已启用 cookie")
    }
else
    {
    alert("未启用 cookie")
    }
}
</script>
</body>

onchange事件
结合对输入字段的验证来使用

请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>

onmouseover 和 onmouseout 事件

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div> //设置盒子的样式，并设置鼠标经过和鼠标移出的样式

<script>
function mOver(obj)//当鼠标经过时，修改盒子中的内容
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

onmousedown、onmouseup 以及 onclick 事件
首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

4.HTML DOM元素（节点）
创建新的html元素：向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素

<div id="div1">
  <p>这是一个段落</p>
</div>
<script>
var para=document.createElement("p");//创建一个p元素
var node=document.createTextNode("这是一个新段落。");/创建文本节点
para.appendChild(node);   //向 p元素追加这个文本节点
var element=document.getElementById("div1");//找到一个已有的元素
element.appendChild(para);  //把p追加到div
</script>

删除已有的元素
找到需要删除的元素和这个元素的父元素，然后removeChild

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

也可以通过子元素找到父元素

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