JavaScript DOM学习

已于 2022-01-18 21:51:58 修改
阅读量84 收藏
点赞数
分类专栏： JavaScript学习记录 文章标签： javascript html html5
于 2021-09-13 21:11:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45654590/article/details/120126743
版权
本文主要探讨了JavaScript中DOM的相关操作，包括如何实例化、获取和创建节点，详细讲解了Document、Element、Text和Comment节点的属性和方法，并介绍了DOM节点的追加、插入、删除和复制等操作。重点讲解了window.onload事件以及节点操作的最佳实践。
摘要由CSDN通过智能技术生成

DOM：文档对象模型


DOM是针对HTML和XML文档的一个API
IE中的所有DOM对象都是以COM对象的形式实现的

实例化

通过DOM获取节点

    <div id="myDiv">
    <div class="" id="div1">text</div>
    <div class="" id="div2">text</div>
    </div>
<script>
<!-- 要在html文件读取结束后再获取DOM节点 -->
    var myDiv=document.getElementById("myDiv");
    //通过Id拿到myDiv节点
    console.log(myDiv);
    var div1=document.getElementById("div1");
    console.log(div1);
</script>

在这里插入图片描述

通过DOM创建节点

<script>
    var node=document.createElement("LI");
    // 创建一个li节点
    var textNode=document.createTextNode("Hello");
    // 创建一个text节点
    node.appendChild(textNode);
    // 将text节点追加到li节点上
    document.getElementById("myDiv").appendChild(node);
    // 找到myDiv节点 然后将node节点追加myDiv的子节点
</script>

在这里插入图片描述

文档类型

Document

表示整个html文档

属性

属性描述
body直接指向body元素
head获取html头部内容
title获取文档标题
doctype$获取<!DOCTYPE>兼容性不强
URL获取完整的URL
domain获取域名
referrer获取链接到当前页面的那个页面的URL
images获取页面所有的img对象 返回值：HTMLCollection
forms获取页面所有的form对象 返回值：HTMLCollection
links获取文档中带有href属性的a元素

方法

方法作用
getElementById()通过元素id获取元素节点 调用者：document 参数：想要获取的元素id 返回值：找到的第一个元素，如果没有则返回null
 <div class="app">
        div.app
</div>
<div id="app">
       div#app1
</div>
<script>
    var idApp=document.getElementById("app");
    console.log(idApp);
</script>

在这里插入图片描述

方法作用
getElementsByClassName()通过元素类名获取元素节点 调用者：document 参数：一个字符串表示元素的类名，可以由空格隔开 返回值：HTMLCollection（包含一个或多个元素的list）可以使用数组的操作方式处理结果
 <div class="app">
        div.app
</div>
<div id="app">
       div#app1
</div>
<script>
    var classAPP=document.getElementsByClassName("app");
    console.log(classAPP);
</script>

在这里插入图片描述

方法作用
getElementsByTagName()通过元素的元素名/标签名找到对应的元素 调用者：document 参数：一个字符串表示元素的元素名 返回值：找到的所有符合条件的元素集合
<div class="app">
        div.app
</div>
<div id="app">
       div#app1
</div>
<script>
    var myDivs=document.getElementsByTagName("div");
    console.log(myDivs);
</script>

在这里插入图片描述

方法作用
getElementsByName()通过元素的name属性找到对应的元素 调用者：document 参数：一个字符串表示元素name 返回值：NodeList,包含一个或多个元素
    <div name="myDiv">123</div>
<script>
    var myNameDiv= document.getElementsByName("myDiv");
    console.log(myNameDiv);
</script>

在这里插入图片描述

Element

属性

属性描述
id元素在文档中的唯一标识符
className与元素的class特性相对应 可以重复,可以有多个,用空格分隔
title与元素相关的附加说明信息
srcimg元素具有的属性
altimg元素具有的属性
自定义属性

方法

方法作用
setAttribute（）；给获取到的元素设置属性 调用者：要设置属性的元素　参数：（＂属性名＂，“对应值”）返回值：　注意：要设置的值存在时，修改原来的值，不存在的话，添加值
<div class="one">
    myDiv
</div>
<script>
    var node=document.getElementsByClassName("one")[0];
    node.setAttribute("className","two");
    //node.setAttribute（“class”,"新类名"）；（设置类名） 
    //  node.className="two";
    //node.className="";（设置类名）
    console.log(node);
</script>

在这里插入图片描述

方法作用
getAttribute（）；获取到相应元素的某个属性　调用者：元素　参数：属性名　返回值：对应的属性值
<div class="one" style="color: red;">
    myDiv
</div>
<script>
    var node=document.getElementsByClassName("one")[0];
    console.log(node.getAttribute("class"));
    //node.getAttribute("class")；（获取类名）
    console.log(node.getAttribute("style"));
</script>

在这里插入图片描述

方法作用
removeAttribute（）；移除相应元素的某个属性　参数：属性名
    <div class="one" id="one" style="color: red;">
        myDiv
    </div>
<script>
    var myDiv=document.getElementById("one");
    myDiv.removeAttribute("id");
    //移除id
    console.log(myDiv);
</script>

在这里插入图片描述

方法作用
createElement（）；创建一个dom节点　调用者：document　参数：要创建元素的标签名，在html中不区分大小写，在xml中区分大小写
<script>
    var node=document.createElement("LI");
    // 创建一个li节点
</script>

window.onload
window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法
通常用于 body元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

兄弟、孩子节点属性

属性描述
firstElementChild某个节点的第一个孩子
lastElementChild某个节点的最后一个孩子元素节点
<div class="one" id="myDiv" style="color: red;">myDiv
    <div id="div1-1">1</div>
    <div id="div1-2">2</div>
    <div id="div1-3">3</div>
    <div id="div1-4">4</div>
</div>
<script>
    var myDiv=document.getElementById("myDiv");
    console.log(myDiv.firstElementChild);
    console.log(myDiv.lastElementChild);
</script>

在这里插入图片描述

属性描述
nextElementSibling某个节点的下一个兄弟元素节点
previousElementSibling某个节点的上一个兄弟元素节点
<div class="one" id="myDiv" style="color: red;">myDiv
    <div id="div1-1">1</div>
    <div id="div1-2">2</div>
    <div id="div1-3">3</div>
    <div id="div1-4">4</div>
</div>
<script>
 	console.log(myDiv.firstElementChild.nextElementSibling);//下一个兄弟节点
    console.log(myDiv.lastElementChild.previousElementSibling);//上一个兄弟节点
</script>

在这里插入图片描述

属性描述
childElementCount返回该节点子元素的数量
<div class="one" id="myDiv" style="color: red;">myDiv
    <div id="div1-1">1</div>
    <div id="div1-2">2</div>
    <div id="div1-3">3</div>
    <div id="div1-4">4</div>
</div>
<script>
    var myDiv=document.getElementById("myDiv");
    console.log(myDiv.childElementCount);
</script>

在这里插入图片描述

属性描述
innerHTML获取或设置指定元素标签内的 html内容
<div class="one" id="myDiv" style="color: red;">myDiv
    <div id="div1-1">1</div>
    <div id="div1-2">2</div>
    <div id="div1-3">3</div>
    <div id="div1-4">4</div>
</div>
<script>
    var myDiv=document.getElementById("myDiv");
    console.log(myDiv.innerHTML); 
</script>

在这里插入图片描述

属性描述
innerText获取或设置指定元素标签内的文本值
<div class="one" id="myDiv" style="color: red;">myDiv
    <div id="div1-1">1</div>
    <div id="div1-2">2</div>
    <div id="div1-3">3</div>
    <div id="div1-4">4</div>
</div>
<script>
    var myDiv=document.getElementById("myDiv");
    console.log(myDiv.innerText); 
</script>

在这里插入图片描述

属性描述
textContent返回该元素内部的text
<div class="one" id="myDiv" style="color: red;">myDiv
    <div id="div1-1">1</div>
    <div id="div1-2">2</div>
    <div id="div1-3">3</div>
    <div id="div1-4">4</div>
</div>
<script>
    console.log(myDiv.textContent);
</script>

在这里插入图片描述

Text

属性

属性描述
length文本长度
  <div>hello,world</div>
<script>
   var div=document.getElementsByTagName("div")[0];
    console.log(div.innerText.length);
</script>

在这里插入图片描述

方法

方法描述
appendData给文本节点追加文本　调用者：文本节点　参数：要追加的文本内容
  <div>hello,world</div>
<script>
    var textNode=document.createTextNode("中国");
    textNode.appendData("你好");
    console.log(textNode);
</script>

在这里插入图片描述

方法描述
appendChild向节点添加最后一个子节点
  <div>hello,world</div>
<script>
  var div=document.getElementsByTagName("div")[0];
    var textNode=document.createTextNode("中国");
    div.appendChild(textNode);
</script>

在这里插入图片描述

方法描述
deleteData删除文本　调用者：文本节点　参数：（开始位置，要删除的数量）
<script>
    var textNode=document.createTextNode("helloworld");
    textNode.deleteData(0,2);
    console.log(textNode);
</script>

在这里插入图片描述

方法描述
insertData插入文本　参数：（开始位置，要插入的数据）
<script>
  var textNode = document.createTextNode("hello,");
    textNode.insertData(6, "Tom");
    console.log(textNode);
</script>

在这里插入图片描述

方法描述
replaceData替换文本　调用者：参数：（开始的位置，要替换文本的长度，替换的文本）
<script>
    var textNode = document.createTextNode("你好世界");
    textNode.replaceData(0, 2, "*"); 
    console.log(textNode);
</script>

在这里插入图片描述

方法描述
splitText将两个文本节点分为两个　参数：分割点的位置，返回值：分割好的后面的文本节点
<script>
  var textNode=document.createTextNode("helloworld");
  console.log(textNode.splitText(5));
</script>

在这里插入图片描述

方法描述
substringData提取文档节点中的字符串　参数：（开始的位置，要提取文本的个数）　返回值：提取出来的字符串　注意：不改变原文本对象
<script>
   var textNode=document.createTextNode("helloworld");
   console.log( textNode.substringData(0,5));//hello
   console.log(textNode);//原对象未改变
</script>

在这里插入图片描述

方法描述
createTextNode创建一个文本节点　调用者：document　参数：文本内容　返回值：textNode
<script>
   var textNode=document.createTextNode("杰瑞");
   console.log(textNode);//"杰瑞"
</script>

Comment

注释

方法

<script>
    var cNode = document.createComment("这是一个注释");
    console.log(cNode);
</script>

在这里插入图片描述

DOM节点操作

    <div>123</div>
<script>
    //创建一个div节点
    var myDiv = document.createElement('div');
    //给节点添加文本内容
    myDiv.innerText = "这是新创建的div";
    // 找到页面上的一个节点
    var rootDiv=document.getElementsByTagName("div")[0];
    // 将myDiv追加到rootDiv上
    rootDiv.appendChild(myDiv);
</script>

在这里插入图片描述

节点追加

方法描述
appendchild()将节点作为子节点追加到调用它的节点的后面 调用者：父节点 参数：要添加的新节点
<script>
    var myDiv=document.createElement('div');
    myDiv.innerText="第五个节点";
    var rootDiv=document.getElementsByClassName('parent')[0];
    rootDiv.appendChild(myDiv);
</script>

在这里插入图片描述

注意：任何dom节点不能同时出现在文档的多个位置，如果追加的节点是原本存在的，那只会改变节点位置

<script>
    var rootDiv=document.getElementsByClassName('parent')[0];
    var firstDiv=document.getElementsByClassName("child")[0];
    rootDiv.appendChild(firstDiv);
</script>

在这里插入图片描述

节点插入

方法描述
insertBefore()将新的节点插入到之前某一个节点的前面 调用者：父节点 参数：(要插入的新节点，旧的节点)
   <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
<script>
	// 将x插入在child3的前面
    var myDiv=document.createElement('div');
    myDiv.innerText="x";
    var rootDiv=document.getElementsByClassName('parent')[0];
    var childNode=document.getElementsByClassName('child')[2];
    rootDiv.insertBefore(myDiv,childNode);
</script>

在这里插入图片描述

节点删除

方法描述
removeChild将某个子节点删除 调用者：父节点 参数：要删除的子节点
   <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
    </div>
<script>
    var rootDiv=document.getElementsByClassName('parent')[0];
    var childNode=document.getElementsByClassName('child')[2];
    rootDiv.removeChild(childNode);
</script>

在这里插入图片描述

节点复制

方法描述
cloneNode()复制节点 调用者：要复制的节点自身 参数：一个可选参数Boolean(默认为false，浅克隆只复制标签；如果为true，深克隆复制标签和内容)
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
<script>
       var rootDiv=document.getElementsByClassName('parent')[0];
        var childNode=document.getElementsByClassName('child')[0];
        var cloneChildNode=childNode.cloneNode(true);
        // 加上true为深克隆
        rootDiv.appendChild(cloneChildNode);
</script>

在这里插入图片描述

勇敢小阵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之DOM
qq_43751200的博客
06-05 1774
DOM
JavaScript：DOM对象
盒马的博客
12-23 1315
讲解JavaScript中的DOM对象，并介绍其获取，修改方式
JavaScript-DOM 学习（含案例源码）
weixin_45515107的博客
05-05 1925
1、DOM概念 文档对象模型（Document Object Model,简称DOM）,是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DPM接口，通过这些DOM接口可以改变网页的内容、结构和样式 1.1、DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 注意：DOM把
JavaScript基础学习 DOM
柠檬味小发糕的博客
12-14 520
JavaScript基础学习 DOMDOM获取元素获取特殊元素 html与body事件三要素innerText与innerHTML的区别分时间问候案例 DOM获取元素 <!DOCTYPE html> <html> <head> <title>DOM开始学习</title> </head> <body> <div id="time">2021-12-13</div>
JavaScript学习之DOM模型概念
林林一928的博客
04-21 771
DOM是浏览器提供一套专门用来操作网页内容的功能。JavaScript分为: 1. ECMAScripts(javaScripts语言基础)2.Web APIs: 2.1 DOM(页面文档对象类型)2.2 BOM(浏览器对象模型)。节点（node）：DOM 的最小组成单位。 一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。Node.nodeType属性
JavaScript之DOM操作
fsLees的博客
03-27 1266
JavaScript中的一些简单的DOM操作
JavaScript DOM详解
Chiclaim
10-03 7442
DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling
javascript-DOM学习
技术何
10-29 613
javascript-DOM学习 　　DOM document(html) object modle 　　document对象(DOM核心对象) 　　dom能用来干什么? 　　对html元素的样式(颜色、大小、位置等等)、内容、属 　　性来进行动态的改变和操作。 　　document对象 　　• 一、属性 　　• title 返回
JavaScript的学习之DOM的查询（一）
人生苦短
06-26 577
对于DOM的查询内容知识点比较多，分成几个部分学习，这节学习主要掌握三个知识点。
JavaScript的学习之DOM简介
人生苦短
06-24 579
DOM全称Document Object Model文档对象模型文档：表示整个HTML网页文档对象：表示网页中的每一个部分转换为一个对象模型：表示对象之间的关系，为了方便我们获取对象。
JavaScript DOM学习第一章 W3C DOM简介
01-19
在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。 首先是对于DOM的一些建议和...不管是Perl、VBScript还是JavaScript你都可以读取任何你
JavaScript DOM 学习第五章 表单简介
12-01
因为每一个表单的检测项都不同，所以我也不能给你一...Forms & JavaScript Living Together in Harmony局限性 首先，你需要了解当用户提交了表单之后JavaScript的检测代码会做什么： 1、JavaScript检测表单时可能会像下
JavaScript DOM 学习第七章 表单的扩展
12-13
只有使用W3C DOM才能让用户决定生成多少个字段。这个效果和之前的大不相同。 例子 当你点击发送的时候，表单就会把得到的所有参数以数组的形式发送。这用来检查是否真正的发送到了服务器端。不幸的是，mac版的IE和...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 1599
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 239
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 553
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
jEasyUI 创建带复选框的树形菜单
最新发布
wjs2024的博客
09-10 268
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
hiprint打印/jsPDF使用/html2canvas
song854601134的博客
09-05 1347
hiprint
javascriptdom学习
07-20
对于学习 JavaScript DOM（文档对象模型），你可以按照以下步骤进行： 1. 先了解什么是DOM：DOM 是一种对 HTML 和 XML 文档的编程接口，它将文档解析成由节点和对象（如元素、属性和文本）组成的结构，开发者可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值