HTML DOM

最新推荐文章于 2024-06-26 06:32:39 发布

Fzxey

最新推荐文章于 2024-06-26 06:32:39 发布

阅读量257

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Fzxey/article/details/90706604

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

HTML DOM

HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） DOM;

HTML DOM 模型树:

在这里插入图片描述

我们可以通过Java Script 来操作模型树中的各个节点对象来完成网页效果

访问DOM节点

使用getElement系列方法访问指定节点
- getElementById()、getElementsByName()、getElementsByTagName() 直接获取
根据层次关系访问节点
- 层次关系：树形结构通过子父或者兄弟关系来访问

nodeType 属性：

在这里插入图片描述

元素属性：

在这里插入图片描述

节点属性：

在这里插入图片描述

操作DOM节点

操作节点的属性
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
创建和插入节点

在这里插入图片描述

替换和删除节点

在这里插入图片描述

获取元素样式

HTML元素.style.样式属性;

document.defaultView.getComputedStyle(元素，null).属性;
操作节点样式

HTML元素.style.样式属性 = “值”;

HTML元素.className = “样式名称”;

示例


<html>
<head>
<meta charset="utf-8">
<title>事件触发</title>
</head>
<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>

鼠标触发事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>替换元素</title>
</head>
<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 parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

</body>
</html>