JavaScript / 前端

全称：文档对象模型(Document Object Model)

查找HTML元素

  • 通过id查找HTML元素
  • 通过标签名查找HTML元素
  • 通过类名查找HTML元素
// 通过id查找 （找到会将其以对象的形式返回给x，找不到则返回null给x）
// 查找id为intro的HTML元素
var x = document.getElementById("intro");
// 通过标签名查找
// 查找id为main的元素的所有p元素
var x = document.getElementById("main");
var y = x.getElementByTagName("p");

改变HTML输出流

语法

document.write();

实例

输出当前日期

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

运行结果

改变HTML内容

语法

document.getElementById(id).innerHTML=new HTML

实例

改变p元素内容

<html>
<body>
<p id="test1">Hello World!</p>
<script>
document.getElementById("test1").innerHTML="改变内容";
</script>
</body>
</html>

改变HTML属性

语法

document.getElementById(id).attribute=new value

实例

改变img标签的src属性

<!DOCTYPE html>
<html>
<body>
<img id="image" src="test1.jps">
<script>
document.getElementById("image").src="change.jpg";
</script>
</body>
</html>

改变HTML样式

语法

document.getElementById(id).style.property=new style

实例

改变p元素的样式

<p id="test">Hello World!</p>
<script>
document.getElementById("test").style.color="green";
</script>

DOM 事件

在用户点击某个元素时执行代码，需向HTML事件属性添加JavaScript代码

onclick=JavaScript

HTML事件示例：

  • 点击鼠标时
  • 网页已加载时
  • 图像已加载时
  • 鼠标在元素上时
  • 输入字段被改变时
  • 提交HTML表单时
  • 用户触发按键时

示例

// 改变 h1 元素内容
<h1 onclick="this.innerHTML='你好'">点击</h1>
// 向button元素分配onclick事件 displayDate为自定义函数
<button onclick="displayDate()">点击这里</button>
// 通过JavaScript向元素分配事件
<script>
document.getElementById("main").onclick=function(){displayDate()};
</script>
  • onload和onunload事件
    • 这两个事件会在进入或离开页面时触发（可用于处理cookie）
  • onchange事件
    • 此事件常用于对输入字段的验证
  • onmouseover和onmouseout事件
    • 用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
  • onmousedown、onmouseup 以及 onclick 事件
    • 点击鼠标、释放鼠标、完成点击 
// onload事件
<body onload="checkCookies()">
// onchange事件
<input type="text"id="fname"onchange="upperCase()">
// 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 事件 
<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>

DOM 创建删除元素

创建元素

创建元素时，必须向一个已存在的元素追加元素

<!DOCTYPE html>
<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>
</body>
</html>

删除元素

删除元素时要先获得该元素的父元素

<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>
// 不引用父元素的情况下删除元素 (parentNode 找到父元素)
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

发表回复