DOM快速上手（快速回忆）

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量322 收藏 2
点赞数
分类专栏： 前端 文章标签： DOM 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/edegod/article/details/89788934
版权

学DOM之前建议先学会HTML、CSS、JS，至少了解，我就是只学了HTML就看DOM，有点不适应，好在我有点编程功底，还是能大概看懂的。

我这个是在w3school学完之后，精简整理的，有些东西让我舍了或者合并了，如果不适的化还是看w3school原版吧。

目录

一、简介：

二、HTML的DOM节点树

三、方法

四、属性

五、访问

六、修改

七、事件

八、导航

其他

一、简介：

就是实现程序与脚本，动态的访问和更新文档(HTML/XML)内容、结构、样式。

对于HTML来说就是：关于如何获取、修改、添加或删除 HTML 元素的标准。

 

如何实现呢？

在JS中调用：js对象.DOM方法.DOM属性

二、HTML的DOM节点树

DOM标准规定HTML所有内容都看作节点，例如整个文档，元素，元素内文本，属性，注释等。DOM的对象为方法和属性。

上图就是DOM在HTML中的节点树，树中所有节点可通过js访问（增删改）。

至于父子同胞节点，字面意会。

三、方法

方法是指能够执行的动作（比如添加或修改元素）

常用方法：

getElementById()

返回带有指定 ID 的元素。

getElementsByTagName()

返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName()

返回包含带有指定类名的所有元素的节点列表。

appendChild()

把新的子节点添加到指定节点。

removeChild()

删除子节点。

replaceChild()

替换子节点。

insertBefore()

在指定的子节点前面插入新的子节点。

createAttribute()

创建属性节点。

createElement()

创建元素节点。

createTextNode()

创建文本节点。

getAttribute()

返回指定的属性值。

setAttribute()

把指定属性设置或修改为指定的值。

四、属性

属性是指能够获取或设置的值（比如节点的名称或内容）。

1. nodeName 属性规定节点的名称。

    nodeName 是只读的

    元素节点的 nodeName 与标签名相同

    属性节点的 nodeName 与属性名相同

    文本节点的 nodeName 始终是 #text

    文档节点的 nodeName 始终是 #document

2. nodeValue 属性规定节点的值。

    元素节点的 nodeValue 是 undefined 或 null

    文本节点的 nodeValue 是文本本身

    属性节点的 nodeValue 是属性值

3. nodeType 属性

  • 元素      1

  • 属性      2

  • 文本      3

  • 注释      8

  • 文档      9

五、访问

即访问节点，访问方法：

1. getElementById()

2. getElementById(); 方法返回带有指定 ID 的元素：

3. getElementsByTagName()

       node.getElementsByTagName("tagname"); 返回带有指定标签名tagname的所有元素。

       下面的例子返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：

document.getElementById("main").getElementsByTagName("p");

4. getElementsByClassName()

       document.getElementsByClassName("intro");查找带有相同类名的所有 HTML 元素

六、修改

1. 更改内容(innerHTML只是返回子节点)

使用innerHTML属性：

<!DOCTYPE HTML>
<html>
<body>

<p id=”p1”>Hello World</p>

<sript>
document.getElementById(“p1”).innerHTML=”New text”;
<script>

</body>
</html>

       下面利用函数改变<p>内文本内容：

<!DOCTYPE html>

<html>
<body>

<p id=”p1”>Hello World</p>

<script>
funtion ChangeText()
{
document.getElementById(“p1”).innnerHTML=”New text”;
}

</body>
</html>

利用replaceChild()替换指定元素（不止文本）：

<div id=”dic1>

<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”);
parnet.replaceChild(para.child);

</script>

2. 更改HTML样式

       如改变段落颜色：

<html>
<body>

<p id=”p2”>Hello World</p>

<script>
document.getElementById(“p2”).style.color=”blue”;
</script>

</body>
</html>

3. 创建新的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”);
                                  //var child=document.getElementById(“p1”);
element.appendChild(para);        //element.insertBefore(para,child);

</script>

4. 删除HTML元素

       例如：      

<div id=”div1”>

<p id=”p1”>This is a paragraph.</p>
<p id=”p2”>This is another paragrapgh</p>

</div>

 <srcipt>

var parent=document.getElementById(“div1”);
var child=document.getElementById(“p1”);
parent.removeChild(“child”);
//或者移除定位父节点，使用parentNode自动查找父节点如：child.parentNode.remove(“child”);

</script>

七、事件

比如点击事件、移动事件、加载事件、表单提交、改变输入字段等

onclick&onmouseup&onmousedown

点击触发

1. 点击文字改变如下（有顺序要求）：

<!DOCTYPE html>

<html>
<body>

<h1 onclick=”this.innerHTML=’hello’”>请点击文字</h1>

</body>
</html>

2. 使用函数实现上面功能（无顺序要求）：

<!DOCTYPE html>

<html>
<body>
<script>

funtion changtext(id)
{
id.innerHTML=”hello”;
}

</script>

<h1 onclick=”changetext(this)”>请点击文字</h1>

</body>
</html>

还有这种方法：

<!DOCTYPE html>

<html>

<body>

<p>点击执行</p>
<button id=”1”>按钮</button>
<p id=”2”></p>

<script>

document.getElementById(“1”).onclick=function(){displayDate()};
function displayDate()
{
document.getElementById(“2”).innerHTML=Date();
}

</script>
</body>

</html>

点击按住触发

<!DOCTYPE HTML>

<html>
<body>
<div

onmousedown=”mDown(this)”
onmouseup=”mUp(this)”

style=”background-color:#D94A38;width:200px;height:50px;padding-top:25px:text-align:center;”>

</div>

<script>

function mDown(obj)
{
obj.style.backgroundColor=”#lec5e5”;
obj.inerHTML=”松开鼠标”;
}

function mUp(obj)
{
obj.style.backgroundColor=”#D94A38”;
obj.innerHTML=”点击这里”;
}

</script>

</body>

</html>

onload&onunload

进入或离开页面触发，onload可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。onload和onunload 事件可用于处理cookies，例如：

<!DOCTYPE html>

<html>

<body onload=”checkCookies()”>

<script>

funtion checkCookies()
{
if (navigator.cookieEnabled==true)
       {
       alert(document.cookie)
       }
else
       {
       alert(“null”)
       }
}

</script>

<p>有则弹出cookie，无则返回null</p>
</body>
</html>

onchange

常用于输入字段的验证、改变等

例如小写变大写：

<!DOCTYPE html>

<html>
<head>
<script>

function myFunction()
{
var x=document.getElementById(“fname”);
x.value=x.value.toUpPerCase();
}

</script>
</head>
<body>

<input type=”text” id=”fname” onchange=”myFunction()”>

</body>
</html>

onmouseover&onmouseout

鼠标指针移动到或离开元素时触发函数

<!DOCTYPE HTML>

<html>
<body>
<div

onmouseover=”mOver(this)”
onmouseput=”mOut(this)”

style=”background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;”>

</div>

<script>

function mOver(obj)
{
obj.innerHTML=”mouse in here”
}

function mOut(obj)
{
obj.innerHTML=”mouse out”
}

</script>
</body>
</html>

八、导航

1. 使用length实现元素循环

<!DOCTYPE HTML>

<html>
<body>


<p>the first para</p>
<p>the second para</p>
<p>the third para</p>

<script>

x=document.getElementsByTagName(“p”);
for(i=0;i<x,length;i++)
       {
       document.write(x[i].innerHTML);
       document.write(“<br>”);
       }

</script>
</body>
</html>
  1.  只能使用3个节点属性访问元素文本：parenNode、firstChild、lastChild
  2.  使用2个属性访问整体文档内容（访问时接.innerHTML）：document.documentElement、document.body
  3.  除了innerHTML还可以使用childNode[].nodeValue

其他

常见单词：

Element元素

Attribute属性

 

EDEGOD
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js之DOM深入学习总结
越努力，越幸运！
07-05 4889
DOM编程深入学习
入门必读 使用JavaScript快速开发物联网
m0_46700908的博客
06-26 478
作者 | Sebastián Peyrott责编 | 苏宓微信公众号ID | csdn_iot如果你想入门学习如何在一个在小型 IoT 设备（例如微控制器平台）上运行 JavaScript，那么这篇文章就是为你量身定制的。JavaScript 不仅是 Web 时代的通用语言，现在还延伸到了令人难以置信的其它地方。它是一个对初学者友好的语言（初始版本在 10 天内构建完成）...
为什么说DOM操作很慢
现在学习也不晚
03-15 1339
一直都听说DOM很慢，要尽量少的去操作DOM，于是就想进一步去探究下为什么大家都会这样说，在网上学习了一些资料，这边整理出来。 　　首先，DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。下面主要先介绍下这些浏览器行为，阐述一个页面是怎么最终被呈现出来的，另外还会从代码的角度，来说明一些...
我终于要学DOM了
m0_51045721的博客
03-17 852
文章目录targetDOM获取元素 target DOM是啥 获取页面元素 给元素注册事件 操作DOM 元素的属性 创建元素 操作DOM节点 DOM 文档对象模型—就是一个接口，处理文档的接口 可以改变页面的内容、结构、样式等等 DOM树 文档：一个页面就是一个文档 元素：页面的所有标签都是元素 节点：网页中所有的内容都是节点（标签、属性、文本、注释等等）------------用node 表示 DOM把这些内容都当作 对象 获取元素 ID 获取 标签名获取 HTML 5 新增的方法获取 特殊元素
php 短信接入dom,dom聊天内容发送
weixin_42370743的博客
03-11 468
摘要：DocumentDocument提交let message = document.getElementsByName('message')[0];let button = document.getElementsByTagName('button')[0];let ul = document.getElementsByTagName('ul')[0];button.onclick = fun...
手把手教你快速上手XSS攻击
2301_79455190的博客
12-21 1395
跨站脚本攻击（Cross-site scripting，XSS）是一种安全漏洞，攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。若受害者运行这些恶意代码，攻击者就可以突破网站的访问限制并冒充受害者。根据开放式 Web 应用安全项目（OWASP），XSS 在 2017 年被认为。XSS 攻击可以分为 3 类：存储型（持久型）、反射型（非持久型）、DOM 型。注入型脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器上传回并执行。
零基础快速上手HarmonyOS开发3---JS布局开发指南、页面生命周期解析、如何进行页面间跳转和传参？
webor2006的博客
12-08 3309
JS布局开发指南： 在上一次博客后台 - 博客园咱们学习了鸿蒙Java布局开发的一些基础，而对于鸿蒙来说它是还支持用JS语言来进行开发的，所以这里也从基础开始了解一下。 JS UI特性： 上官网文档中心可以看到，对于JS语言的开发官方有一个专有名词： 其中可以看到可以基于JS（JavaScript），也可以基于TS（TypeScript），这里重点是看JS这块的，先来了解一下它的特点： JS UI的整体架构： 这块官网也有解释，这里贴出来： 使用基于JS扩展的类Web开发范式的方舟开发
回忆经典的开发工具
weixin_34332905的博客
03-29 59
转自http://www.cnblogs.com/sl-shilong/archive/2013/03/29/2988486.html 平时的开发如果我们能有些得心应手的开发工具，就好比是如虎添翼。会大大的提高我们的开发效率。Visual Studio 自不必说，通过此文，和大家回忆下除此之外的经典的开发工具，同时希望能把这些经典的工具介绍给新手，相信对平日的开发会有 很大的帮助。Intern...
[Ajax]Ajax中文手册(快速上手).rar
08-13
**中文手册的快速上手指南**： 1. **基础篇**：了解Ajax的基本概念和工作流程，熟悉XMLHttpRequest对象的方法和属性。 2. **实例篇**：通过简单示例，实践创建和发送Ajax请求，解析响应数据并更新页面。 3. **进阶篇...
dom4j 快速掌握
12-02
- XPath：DOM4J支持XPath表达式，如`//tag[@attr='value']`，用于快速定位XML节点。 - `Selector`：DOM4J还提供了`Selector`类，可以构建更复杂的查询条件。 6. 输出XML - 使用`DocumentWriter.write()`或`XML...
vue3快速上手.md
01-06
- 重写虚拟DOM的实现和Tree-Shakin 3.拥抱TypeScript - Vue3可以更好的支持TypeScript 4.新的特性 1. Composition API（组合API） - setup配置 - ref与reactive - watch与watchEffect - provide与inject 2. 新...
解析包dom简单快速
05-11
这个jar包是应用于解析xml文件的jar文件
JavaScript快速开发工具箱
07-22
本书开篇讲解Javaｓｃｒｉｐｔ、CSS和DOM，此后每章都列举一个完整示例，指导您将特定效果快速应用于网页。使用这些插件，您只需调用一个函数就能完成诸 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
回忆我们经典的开发工具
weixin_30718391的博客
03-29 48
平时的开发如果我们能有些得心应手的开发工具，就好比是如虎添翼。会大大的提高我们的开发效率。Visual Studio 自不必说，通过此文，和大家回忆下除此之外的经典的开发工具，同时希望能把这些经典的工具介绍给新手，相信对平日的开发会有很大的帮助。Internet Explorer Developer Toolbar简介：微软发布了Internet Explorer Developer Toolba...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 792
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 575
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 979
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
PyQt4入门指南：快速上手GUI应用程序开发
* 易于使用：PyQt 4 提供了易于使用的 API，能够快速上手。 **PyQt 4 的应用** PyQt 4 的应用包括： * 图形用户界面：PyQt 4 可以用来创建图形用户界面，例如按钮、窗口、状态栏、工具栏等。 * 网络编程：PyQt 4 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值