javaScript DOM使用

最新推荐文章于 2024-04-23 02:00:49 发布

eskimoer

最新推荐文章于 2024-04-23 02:00:49 发布

阅读量1.2k

点赞数

分类专栏：互联网文章标签： html DOM

本文链接：https://blog.csdn.net/ddupd/article/details/24712329

版权

互联网专栏收录该内容

6 篇文章 0 订阅

订阅专栏

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素

1 修改HTML元素内容

document.write(Date()); //在输入流中直接写
document.getElementById(id).innerHTML=new HTML	//改变已经有的元素内容
document.getElementById("image").src="landscape.jpg";	//改变属性值

2 修改CSS的值

document.getElementById(id).style.property=new style
利用这个可以改变文字的大小，颜色，字体等，示例如下：

document.getElementById("p2").style.color="blue";	//改变颜色
οnclick="document.getElementById('p1').style.visibility='visible'" /> //改变可见性

3 对事件作出反应

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
<1> 使用DOM语句
<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>
<2> 在元素标签中分配事件，使用函数

<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">请点击该文本</h1>
</body>

<3> 在javaScript脚本中添加匿名事件
这个格式跟前面的不一样，以function开头

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>

<4> javaScript中添加事件

这个需要注意的是，函数后面不能添加括号（）。
document.getElementById("myBtn").οnclick=displayDate;

<5> 常见的事件
onload //进入页面
onunload //离开页面
onchange //用户改变输入字段的内容时
onmouseover //鼠标移动进去
onmouseout //鼠标离开
onmousedown //鼠标按键按下
onmouseup //鼠标按键弹起
onclick //单击

4 javaScript创建或者删除节点
<1> 创建新节点
如需向 HTML 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>

<2> 删除节点
如需删除 HTML 元素，您必须首先获得该元素的父元素：

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

</body>
</html>

eskimoer

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript DOM使用

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素1 修改HTML元素内容document.write(Date()); //在输入流中直接写document.getElementById(id).innerHTML=new HTML //改变已经有的元素内容document.getElementById("image").src="landscap
复制链接

扫一扫