JavaScript HTML DOM

来源：互联网发布：知乎手机最好的变声器编辑：程序博客网时间：2024/06/05 02:43

通过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);

0 0