JavaScript HTML DOM

来源：互联网发布：站长之家源码下载编辑：程序博客网时间：2024/05/29 10:38

JavaScript DOM

一、查找HTML元素

1、通过 id 找到 HTML 元素

2、通过标签名找到 HTML 元素

3、通过类名找到 HTML 元素

<span style="font-size:14px;"><!DOCTYPE html><html><body><p id="main1">你在南方的艳阳里大雪纷飞</p><div id="main2"><p>我在北方的寒夜里四季如春</p><p>如果天黑之前来得及</p><p>我要忘了你的眼睛</p><p>穷极一生做不完一场梦</p></div><p class="main3">你在南方的艳阳里大雪纷飞</p><p>我在北方的寒夜里四季如春</p><script>x=document.getElementById("main1");document.write(" <p>通过id找到HTML元素 " + x.innerHTML + "</p>");a=document.getElementById("main2");b=a.getElementsByTagName("p");//把带有p的标签的内容读取document.write(" <p>通过标签名找到HTML元素 " + b[2].innerHTML + "</p>");//返回第3个标签内容m=document.getElementsByClassName("main3");document.write("<p>通过类名找到HTML元素 " + m[0].innerHTML + "</p>");</script></body></html></span>

二、改变HTML

document.write()//可用于直接向 HTML 输出流写内容。改变HTML输出流
document.getElementById(id).innerHTML=new HTML//改变HTML内容

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

三、改变css

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

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

四、DOM事件

1、对事件做出反应 onclick=JavaScript

2、onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<span style="font-size:14px;"><!DOCTYPE html><html><body onload="checkCookies()"><script>function checkCookies(){if (navigator.cookieEnabled==true){alert("Cookies 可用")}else{alert("Cookies 不可用")}}</script><p>弹窗-提示浏览器cookie是否可用。</p></body></html></span>

3、onchange 事件

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

<span style="font-size:14px;"><!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></span>

4、onmouseover 和 onmouseout 事件

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

<span style="font-size:14px;"><!DOCTYPE html><html><body><div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div><script>function mOver(obj){obj.innerHTML="Thank You"}function mOut(obj){obj.innerHTML="Mouse Over Me"}</script></body></html></span>

五、DOM EventListener

1、element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

2、 removeEventListener() 方法来移除事件的监听。

3、向同一个元素添加不同事件句柄

element.addEventListener("click", myFunction);

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

4、向window对象添加事件句柄

window.addEventListener("resize", function(){document.getElementById("demo").innerHTML = sometext;});
5、传递参数

element.addEventListener("click", function(){ myFunction(p1, p2); });

6、原始事件方法

element.attachEvent(event, function);
element.detachEvent(event, function);

0 0