web前端之HTML DOM相关

最新推荐文章于 2024-05-06 18:26:11 发布

PlutoCers

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量101

点赞数

分类专栏： web前端 JavaScript 文章标签： javascript dom html

本文链接：https://blog.csdn.net/weixin_43694216/article/details/104724242

版权

web前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

这篇博客算是在W3C上学习web前端时做的笔记,代码示例都是直接摘抄的,东西不算多,也不难掌握,对于初学者来说绝对够了.

DOM操作是前端必须掌握的基础操作之一,所谓HTML 的DOM操作无非是利用Javascript对HTML各个标签组成的节点进行精确操作,是页面更新的常用手段,

关于节点树,节点,父,子,同胞,根之类的概念不做阐述,有web前端基础,学过二叉树数据结构会很容易明白,完全可以依靠自己的知识构建出一颗DOM树
在这里插入图片描述
注:HTML 文档中的所有内容都是节点：

1 整个文档是一个文档节点
2 每个 HTML 元素是元素节点
3 HTML 元素内的文本是文本节点
4 每个 HTML 属性是属性节点
5 注释是注释节点

学习DOM操作无非是学习各种方法,了解与灵活运用DOM的属性

与方法相关的属性

innerHTML - 节点（元素）的文本值

parentNode - 节点（元素）的父节点

childNodes - 节点（元素）的子节点,例:

<p id="intro">Hello World!</p>
<script>
//输出第一个子节点的值
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

firstChild-节点(元素)的首个子元素

lastChild-节点(元素)的最后一个子元素

attributes - 节点（元素）的属性节点

nodeName -节点（元素）的名称

1 nodeName 是只读的
2 元素节点的 nodeName 与标签名相同
3 属性节点的 nodeName 与属性名相同
4 文本节点的 nodeName 始终是 #text
5 文档节点的 nodeName 始终是 #document
注：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性规定节点的值:

1 元素节点的 nodeValue 是 undefined 或 null
2 文本节点的 nodeValue 是文本本身
3 属性节点的 nodeValue 是属性值

nodeType 属性返回节点的类型,nodeType 是只读的。
在这里插入图片描述
document.documentElement - 全部文档

document.body - 文档的主体

textConetent-返回当前节点和他所有带节点的文本内容，自动忽略当前节点内部的html标签，直接返回所有的文本内容。而且该属性是可以读写的。

isConnected-当前节点是否在文档之中，新创建的节点，没有插入的时候这个属性都是false

常见方法如下:

在这里插入图片描述
注意:getElementsByTagName() 方法返回节点列表,节点列表是一个节点数组。
补充:cloneNode()

常见用法

获取指定标签内容并输出:

//AtrributeID表示指定标签的ID
var txt=document.getElementById(AtrributeID).innerHTML;
document.write(txt);

改变样式:

<html>
<head></head>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>

创建新的HTML元素

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
//创建新的元素
var para=document.createElement("p");
//创建新的文本节点
var node=document.createTextNode("This is new.");
//添加文本节点到新的元素上
para.appendChild(node);
var element=document.getElementById("d1");
//将新的元素追加到原有的元素上
element.appendChild(para);  //appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加

//insertBefore()将新元素添加到父元素前面
var child=document.getElementById("p1");
//para-新的元素,child-原有的元素
element.insertBefore(para,child);
</script>

改变事件

<html>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>

删除元素

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
//进行删除操作必须知道被删除的元素的父元素
parent.removeChild(child);

//也可以使用parentNode属性查找其父元素
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
</script>

替换元素

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
//para-新元素,child-旧元素
parent.replaceChild(para,child);
</script>

其它功能

https://www.w3school.com.cn/example/hdom_examples.asp

PlutoCers

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之HTML DOM相关

这篇博客算是在W3C上学习web前端时做的笔记,代码示例都是直接摘抄的,东西不算多,也不难掌握,对于初学者来说绝对够了.DOM操作是前端必须掌握的基础操作之一,所谓HTML 的DOM操作无非是利用Javascript对HTML各个标签组成的节点进行精确操作,是页面更新的常用手段,关于节点树,节点,父,子,同胞,根之类的概念不做阐述,有web前端基础,学过二叉树数据结构会很容易明白,完全可以依靠...
复制链接

扫一扫