DOM文档对象模型常用方法

最新推荐文章于 2022-04-24 20:54:21 发布

Yvonne.Y

最新推荐文章于 2022-04-24 20:54:21 发布

阅读量419

点赞数

分类专栏： JavaScript 文章标签： dom javascript css html 文档对象模型

本文链接：https://blog.csdn.net/PILIpilipala/article/details/108019152

版权

JavaScript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素，属性和文本的树结构

在这里插入图片描述

HTML DOM - 改变 HTML

改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
语法：document.getElementById(id).innerHTML=新的 HTML

<html>
<body>
//改变了 <p>元素的内容： 
<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

改变 HTML 属性

语法：document.getElementById(id).attribute=新属性值

//改变了 <img> 元素的 src 属性：
<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

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

</body>
</html>

HTML DOM - 改变CSS

改变 HTML 样式

语法：document.getElementById(id).style.property=新样式


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
 
</body>
</html>

HTML DOM Document 对象

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML
元素是文本节点。
注释是注释节点。

Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

HTML文档有节点构成的集合，DOM节点有：

元素节点，html , body ,p 等都是元素节点，及标签
文本节点，向用户展示的内容，如列表标签li中的javascript，DOM,css 等文本
属性节点：元素属性，a标签的连接属性href=“”

节点属性
在DOM中，每个节点都有一个对象，DOM节点有三个重要的属性：

nodeName:节点的名称
nodeValue:节点的值
nodeType:节点的类型

nodeName属性：节点的名称，是只读的

元素节点的nodeNme与标签名相同
元素节点的nodeName是属性的名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document

nodeValue属性：节点的值

元素节点的nodeValue是undefined或null

文

本节点的nodeValue是文本自身
属性节点的nodeValue是属性的值

nodeType属性：节点的类型，是只读的，以下常用的几种节点类型：

元素：1
属性：2
文本：3
注释：8
文档：9

HTML DOM 事件

HTML 事件的例子：

当用户点击鼠标时 
当网页已加载时		
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

例如：

//当用户在 <h1> 元素上点击时，会改变其内容
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

HTML 事件属性
如需向 HTML 元素分配事件，可以使用事件属性。

//名为 ok的函数将在按钮被点击时执行。
<button onclick="ok()">点这里</button>

HTML DOM 元素 (节点)

在这里插入图片描述举例：
创建元素节点和文本节点

createElement方法可创建元素节点，此方法可返回一个Element对象。
语法：document.createElement(tagName) 参数：tagName,
字符串值，这个字符串用来指明创建元素的类型。与appendChild 或 insertBefore方法联合使用，将元素显示在页面中
createTextNode()方法创建新的文本节点，返回新创建的Text节点语法：document.createTextNode(data) 参数：data字符串值，可规定此节点的文本

var element = document.createElement("div");
element.className = "message";//设置div元素的类名
var textNode = document.createTextNode("hello world");
element.appendChild(textNode);//将textNode插入节点element中
document.body.appendChild(element);//将element插入文档中

插入节点appendChild()

在指定节点的最后一个子节点列表后添加一个新的子节点。

语法：appendChild(newnode)
newnode:指定追加的节点

<div id="text">
	<p id="x1">HTML</p>
	<p id="x2">CSS</p>
</div>
<script>
var node = document.getElementById("text");
var newnode = document.createElement("p");
newnode.innerHTML = "this is a new p";
node.appendChild(newnode);
</script>

插入节点insertBefore()

insertBefore()方法可在已有的子节点前插入一个新的子节点语法：insertBefore(newnode,node);
参数：newnode 要插入的新节点 node:指定此节点前插入节点

<div id="text">
	<p id="x1">HTML</p>
	<p id="x2">CSS</p>
</div>
<script>
var node = document.getElementById("text");
var newnode = document.createElement("p");
var nodex1 = document.getElementById("x1");
newnode.innerHTML = "this is a new p";
node.insertBefore(newnode,nodex1);
</script>

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如果删除成功，此方法可返回被删除的节点。如失败，则返回null
语法：nodeObject.removeChild(node) 参数：node,必须，指定需要删除的节点

<div id="text">
	<p id="x1">HTML</p>
	<p id="x2">CSS</p>
</div>
<script>
var node = document.getElementById("text");
var nodex1 = document.getElementById("x1");
node.removeChild(nodex1);
</script>

替换节点元素replaceChild

replaceChild实现子节点（对象）的替换。返回被替换对象的引用
语法：node.replaceChild(newnode,oldnew) 参数：newnode 必需，用于替换oldnew的对象。
oldnew 必需，被newnode替换的对象

getElementsByName()方法

getElementsByName()方法返回带有指定名称的节点对象的集合

语法： document.getElementsByName(name)
文档中的name属性可能不唯一，所有getElementsByName()方法返回的是元素的数组，而不是一个元素
和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始

getElementsByTagName()方法

getElementsByTagName()方法返回带有指定标签名的节点对象的结合，返回元素顺序是他们在文档中的书序

语法： getElementsByTagName(tagname)
tagName是标签的名称，如p ,a img等标签名
和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始

setAttribute()方法
setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

语法：elementNode.setAttribute(name,value)
name: 要设置的属性名
value: 要设置的属性值
把指定的属性设置为指定的值，如果不存在具有指定名称的属性，该方法将创建一个新属性
类似于getAttribute方法，setAttribute方法只能通过元素节点对象调用的函数

getAttribute()方法
getAttribute()方法通过元素节点的属性名称获取属性值

语法：elementNode.getAttribute(name)
elementNode:使用getElementById(),getElementsByTagName()等方法，获取到的元素节点
name: 要想查询的元素节点的属性名字

Yvonne.Y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM文档对象模型常用方法

DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素，属性和文本的树结构HTML DOM Document 对象在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档节点。所有的HTML元素都是元素节点。所有 HTML 属性都是属性节点。文本插入到 HTML 元素是文本节点。注释是注释节点。Document
复制链接

扫一扫

专栏目录