DOM的增删改查

1.DOM查询

访问 HTML DOM - 查找 HTML 元素。

一、访问 HTML 元素(节点)

您能够以不同的方式来访问 HTML 元素:

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

二、DOM修改

修改 HTML = 改变元素、属性、样式和事件。

修改 HTML DOM 意味着许多不同的方面:

  • 改变 HTML 内容
  • 改变 CSS 样式
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
  • 改变事件(处理程序)

1.改变元素内容的最简单的方法是使用 innerHTML 属性。

<p id="p1">Hello World!p>
 
<script>
document.getElementById("p1").innerHTML="新文本!";
script>
 
<p>段落通过脚本来修改内容。p>

2.改变 HTML 样式

通过 HTML DOM,您能够访问 HTML 元素的样式对象。
下面的例子改变一个段落的 HTML 样式:

<p id="p1">Hello world!p>
<p id="p2">Hello world!p>
 
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
script>

3.创建新的 HTML 元素

如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。

<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>

4.使用事件

下面的例子在按钮被点击时改变 < p> 元素的文本:

<p id="p1">Hello world!p>
 
<script>
function ChangeText()
{
    document.getElementById("p1").innerHTML="Hello Runoob!";
}
script>
 
<input type="button" onclick="ChangeText()" value="修改文本" />

三、DOM事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

1.onload 和 onunload 事件

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

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

<p>提示框会告诉你,浏览器是否已启用 cookie。p>
body>
html>

2.onchange 事件

onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

DOCTYPE html>
<html>
<head>
<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>

3.onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

DOCTYPE html>
<html>
<body>

<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>

body>
html>

你可能感兴趣的:(javascript,前端,html)