JavaScript复习（二） JS HTML DOM

最新推荐文章于 2021-01-27 20:13:04 发布

zhouzhouasishuijiao

最新推荐文章于 2021-01-27 20:13:04 发布

阅读量137

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zhouzhouasishuijiao/article/details/84931715

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先我们了解一下什么是HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型

看看HTML DOM树（来自w3school）

JavaScript能够改变页面中的所有HTML元素、属性、CSS样式，并且能够对页面中的所有事件做出反应。

查找HTML元素

首先需要查找到该元素，查找的方法有通过id查找，通过标签名查找，通过类名查找

var x=document.getElementById("intro");//通过id查找
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");//通过标签名查找

修改元素、属性

document.getElementById(id).innerHTML=new HTML//修改元素


<script>
document.getElementById("image").src="landscape.jpg";//修改属性
</script>

JavaScript能够对事件做出反应

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

可以看到就是在script之间建立了函数，然后在事件里面调用

这里有特别的两个事件onload和onunload,可以用来处理cookie

创建和删除新的HTML元素

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

删除元素就比较简单

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

zhouzhouasishuijiao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript复习（二） JS HTML DOM

首先我们了解一下什么是HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型看看HTML DOM树（来自w3school） JavaScript能够改变页面中的所有HTML元素、属性、CSS样式，并且能够对页面中的所有事件做出反应。查找HTML元素首先需要查找到该元素，查找的方法有通过id查找，通过标签名查找，通过类名查找var x=docume...
复制链接

扫一扫

专栏目录