JavaScript HTML DOM

最新推荐文章于 2023-06-15 21:40:40 发布

JA0000

最新推荐文章于 2023-06-15 21:40:40 发布

阅读量263

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JA0000/article/details/50788063

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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" οnclick="document.getElementById('id1').style.color='red'">点我!</button>

四、DOM事件

1、对事件做出反应 οnclick=JavaScript

2、onload 和 onunload 事件

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

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

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

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<body οnlοad="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" οnchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>
</span>

4、onmouseover 和 onmouseout 事件

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

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<body>

<div οnmοuseοver="mOver(this)" οnmοuseοut="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);

JA0000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript HTML DOM

JavaScript DOM一、查找HTML元素1、通过 id 找到 HTML 元素2、通过标签名找到 HTML 元素3、通过类名找到 HTML 元素你在南方的艳阳里大雪纷飞我在北方的寒夜里四季如春如果天黑之前来得及我要忘了你的眼睛穷极一生做不完一场梦你在南方的艳阳里大雪纷飞我在北方的寒夜里四季如春x=document.g
复制链接

扫一扫

专栏目录