DOM相关操作

最新推荐文章于 2024-08-21 22:36:29 发布
最新推荐文章于 2024-08-21 22:36:29 发布
阅读量103 收藏
点赞数
分类专栏： html 文章标签： html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_x_m/article/details/108580600
版权

DOM

一、DOM

【概念】DOM:documnet object model 文档对象模型
【注】“W3C”文档对象模型（DOM）是中立于平台和语言的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式

1、DOM中节点种类

   <div title="属性节点">测试DIV</div>

元素节点


属性节点 title=“属性节点”
文本节点 测试DIV
1、DOM:document object model 文档对象模型
2、属性：文本节点，元素节点、类节点
在这里插入图片描述

3、查找元素几点的方法

（1）document.getElementById(id)
【功能】通过当前元素节点的id,获取对应元素节点
元素节点属性：
通过这个节点对象，访问它的一系列属性 在这里插入图片描述
HTML属性的属性
在这里插入图片描述
访问这些属性：元素节点.属性名/元素节点[属性名]
【注】在style样式中，background-color 使用-链接的属性，访问时去掉-，并后续单词的首字母大写
document.getElementById(“id”).style.backgroundColor=“red”;
在这里插入图片描述

例：

window.onload=funciton(){
   var oDiv=documnet.getElementById('div1');
   alert(oDiv);
  }

(2)document.getElementsByTagName();
【注】从node节点开始，找出所有符合条件的元素节点。
【参数】:标签名
【功能】：获取当前页面上所有符合该标签名标准的元素节点
【返回值】：一个装有符合条件的元素节点的数组

<script type="text/javascript">
window.onloag=function(){
//获取当前页面上所有的li标签
var aLis=document.getElementByTagName("li");
alert(aLis.length)//4
}
//第二种方法获取页面上所有的li标签
var oUl=document.getElementById("ul1");
var aLis=oUl.getElementsByTagName('li');
//打印出标签内的内容
for(var i=0;i<aLis.length;i++){
 console.log(aLis[i].innerHTML);
 //等同于
 console.log(aLis.item(i).innerHTML);
}
</script>
<body>
   <ul id="ul1">
	   <li>11111</li>
	    <li>2222</li>
	     <li>3333</li>
	      <li>4444</li>
   </ul>
</body>

（3）document.getElementsByName()
【参数】：name的值
【返回值】:装有符合条件的元素节点的数组
【注】name属性一般情况下，只有文本输入框的元素节点才有

<script  type="text/javascript">
   window.onload=function(){
   var nodes=document.getElementsByName("hello");
   alert(nodes);//object NodeList
   alert(nodes.length);//3
   var oDiv=document.getElementById("div1");
   var node=oDiv.getElementsByClassName("hello");//报错，ODiv没有getElementsByClassName属性
   }
</script>

<body>
 <div name="hello"></div>
 <span name="hello"></span>
 <input name="hello"/>
 <div id="div1"><div name="hello"></div></div>
</body>

（4）node.getElementByClassName()
[功能]:获取node节点下,所有符合条件的元素节点
[参数]:class
返回值:所有符合条件的元素节点组成的数组
[注]getElementsByClassName在低版本浏览器不支持

window.onload=function(){
  var nodes=document.getElementsByClassName("box");
  alert(nodes);//object HTMLCollection
  alert(nodes.length);
  for(var i=0;i<nodes.length;i++){
  alert(nodes[i].innerHTML);
  }
}

[importance :封装函数]!!!----各种浏览器都可使用的方法
//*通配符 任意类型的元素节点

function elementByClassName(parent,classStr){
  //<1>找到parent下所有的元素节点
  var nodes=parent.getElementsByTagName('*');
  var result=[];
  for(var i=0;i<nodes.length;i++){
  //<2>如果符合条件,添加到数组中
  if(nodes[i].className==classStr){
  result.push(nodes[i]);
    }
  }
  return result;
}

4.获取当前样式

<body>
<div id="div1" style="width:300px;height:300px"></div>
</body>

<style>
   #div1{
   background-color:red;
   }
</style>

<script>
    window.onload=function(){
    var oDiv=document.getElementById("div1");
    //获取style中width属性
    console.log(oDiv.style.width);//300
    console.log(oDiv.style.backgroundColor);//获取不到背景属性
    //说明:::通过上述操作,我们只能获取行间的css颜色
     /*
       获取当前有效样式
       getComputedStyle(元素节点)[获取样式类型];
       [支持浏览器]:火狐/谷歌/safari(苹果浏览器)支持
        
        元素节点.currentStyle[获取样式类型];
        [支持浏览器]:IE
        
     */
     console.log(getComputedStyle(oDiv)["width"]);
     //获取当前样式的兼容函数
     function getStyle(elem,attr){
          return elem.currentStyle[attr]?elem.currentStyle[attr]:getComputedStyle(elem)[attr];
        }
     }
</script>

5.获取元素节点

<script type="text/javascript">
/*
id       document.getElementyById();
tagName  document.getElementsByTagName();
name     document.getElementsByName();
className document.getElementsByClassName();
*/
/*
通过封装函数 简化上述的操作
封装一个函数,可以拥有上述几种获取元素节点的功能
[注] css选择器
     #id      通过id获取元素节点
     .class   通过className获取元素节点
     tagName  通过tagName获取元素节点
     name=xxx 通过name获取元素节点
 */
 //封装函数
 function $(vArg){
  //<1>对参数进行区分
  switch(vArg[0]){
       case "#"://id
	       return document.getElementById(vArg.substring(1));
	       break;
	   case "."://calssName
	       return elementByClassName(document,vArg.substring(1));//封装好的方法
	       break;
	  default :
	  //对参数的前五个字符,进行判断
		  var str=vArg.substring(0,5);
		  if(str=="name="){
		     return document.getELementsByName(vArg.substring(1));
	      }else{
	         return document.getElementsByTagName(vArg);
	      }
	      break;
       
    }
  }
function elementByClassName(parent,classStr){
  //<1>找到parent下所有的元素节点
  var nodes=parent.getElementsByTagName('*');
  var result=[];
  for(var i=0;i<nodes.length;i++){
  //<2>如果符合条件,添加到数组中
  if(nodes[i].className==classStr){
  result.push(nodes[i]);
    }
  }
  return result;
}
</script>

6.DOM节点方法

6.1.set/getAttribute()方法

[概念]getAttribute()方法将获取元素中某个属性的值,它和直接使用.属性获取属性值的方法有一定区别

documen.getElementById("box").getAttribute("id");//获取元素的id值
document.getElementById("box").id;//获取元素的id值
document.getElementById("box").getAttribute("mydiv");//获取元素的自定义属性值
document.getElementById("box").mydiv;//获取元素的自定义属性值
document.getElementById("box").getAttribute('class');//获取元素的class值
document.getElementById("box").getAttribute('className')

<script>
 /*
   set/getAttribute()
   removeAttribute()
   [注]都是操作当前元素节点中某个属性
   //通过以下操作可知,点操作与Attribute操作的区别
   <1>class属性范围区别,点操作是通过className,而set/getAttribute是通过class
   <2>set/getAttribute是支持用户自定义属性的
   <3>removeAttribute
 */
 window.onload=function(){
	  var oDiv=document.getElementById("div1");
	  //点操作获取
	  console.log(oDiv.title);//hello
	  console.log(oDiv.className);//box
	  //点操作 赋值
	  oDiv.title="xxx";
	  oDiv.className="xxx";
	  //Attribute操作 获取
	  console.log(oDiv.getAttribute("title"));
	  //Attribute操作 赋值
	  console.log(oDiv.setAttribute("title","xxx"));
	  //设置用户自定义属性
	  oDiv.xxx="yyy";
	  oDiv.setAttribute("xxx","yyy");
	  console.log(oDiv.xxx);//不存在
	  console.log(oDiv.getAttribute("xxx"));//获取成功
	  //移除某个属性
	  oDiv.removeAttribute("title");
	  //点操作 只能清空某个属性
	  oDiv.title="";
  }
</script>

<body>
   <div id="div1" title="hello" name="world" class="box"></div>
</body>

7.元素节点属性

7.1childNodes

获取当前元素节点的所有的子节点;包含两种节点1.文本节点;2.元素节点

<div id="div1"><em>斜体</em>文本内容<strong>粗体</strong></div>

/*
 DOM节点类型
 元素节点 文本节点 属性节点
 属性:nodeName/nodeType/nodeValue
 


*/
window.onload=function(){
var oDiv=document.getElementById("div1");
//object NodeList 装有当前元素节点的所有的子节点
console.log(oDiv.childNodes.length);//3 如果换行,回车也会包含
}

7.2节点属性

节点类型nodeNamenodeTypenodeValue
元素元素名称1null
属性属性名称2属性值
文本#text3文本内容(不包含html)

7.3 firstChild 快速当前元素节点子节点的第一个

lastChild  快速找到元素节点子节点的最后一个

alert(oDiv.firstChild.nodeName);//EM
alert(oDiv.lastChild.nodeName);//strong

7.4删除元素节点的空格

<body>
   <div id="div1">
   <em>斜体</em>
   文本内容
   <strong>粗体</strong>
   </div>
</body>

window.onload=function(){
var oDiv=document.getElementById("div1");
console.log(oDiv.childNodes.length);//5(包含空格.回车)
}
/*问题:如何将空白节点取出
  [注]识别出空白节点
   
   /`\s+$/.test()
   使用左侧的正则进行验证,如果是空白节点,返回true,否则返回false
*/
//删除空白节点
function removeSpaceNode(nodes){
   var result=[];//用于存放不是空白节点的节点
   for(var i=0;i<nodes.length;i++){
    if(node[i].nodeType==3&&/`\s+$/.text(nodes[i].nodeValue)){
    continue;
    }
    result.push(nodes[i]);
   }
  return result;
}
//通过父节点来删除空白节点
[注]删除数组元素时,必须倒序删除
[原因]如果顺序删除,后面的数据会占据删除的位置index,导致无法判断被占据的位置
function removeSpaceNode2(parent){
   var nodes=parent.childNodes;
   //
   for(var i=0;i<nodes.length;i++){
      if(nodes[i].nodeType='3'&&/`\s+$/.test(nodes[i].nodeValue)){
         //删除空白节点
         parent.removeChild(nodes[i])
      }
   }
}

8.ownerDocument属性

[注]ownerDocument 属性返回该节点的文档对象根节点,返回的对象相当于document
[属性]parentNode/previousSibling/nextSibling
[解析]parentNode:属性返回该节点的父节点
previousSibling:属性返回该节点的前一个同级节点
nextSibling:属性返回该节点的后一个同级节点

window.onload=function(){
    var oDiv=document.getElementById('div1');
    console.log(oDiv.ownerDocument==document);//true
    console.log(oDiv.parentNode.nodeName);//BODY
    console.log(oDiv.previousSilbing.nodeName);//会有空白节点,进行删除空白节点操作
    removeSpaceNode2(oDiv.parentNode);
     console.log(oDiv.previousSilbing.nodeName);//SPAN
}

<span></span>
<div id='div1'></div>

9.元素节点属性

属性节点:attribute—返回该节点的属性节点集合

<div id='div1' title='hello' name='world' class='box'></div>
月下脆竹書閣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS】Dom节点操作常用方法
m0_48982503的博客
01-14 1588
目录 1.访问/获取节点 1.1 通过顶层document节点获取： 1.2 通过父节点获取： 1.3 通过子节点获取： 1.4 通过兄弟节点获取： 2.创建节点/属性 3.添加节点 4.复制节点 5.删除节点 6.添加文本 1.访问/获取节点 1.1 通过顶层document节点获取： document.getElementById(id);　　　　　 //返回对拥有指定id的第一个对象 document.getEle...
javascript DOM 操作.doc
01-15
下面是javascript DOM 操作的相关知识点： IE 中的操作 IE 中是以ActiveX来支持DOM的，共有5个版本：Microsoft.XmlDom、MSXML2.DOMDocument、MSXML2.DOMDocument.2.0、MSXML2.DOMDocument.3.0和MSXML2.DOMDocument...
js封装 DOM获取
weixin_30512785的博客
09-04 278
function $(selector){ 　　//获取第一个字符 　　var firstLetter = selector.charAt(0); 　　//对第一个字符进行判断 　　switch(firstLetter){ 　　　　//#则为id名称； 　　　　case '#' : return idSelector(selector); 　　　　break; 　　　...
Chrome Devtools DOM相关操作
AnitaSun的博客
12-05 810
检查节点 选择网页内容，右键，点击 Inspect【检查】 使用键盘导航DOM树 使用上下箭头，可以在这几个li之间来回选择 使用右箭头，展开这个li标签 左箭头，折叠这个li标签 搜索节点 ctrl + f 可以通过字符串，CSS 选择器 或 XPath 搜索DOM树 拖动节点 双击，随意拖动 强制状态 当进行某些操作时会触发某些操作，例如：将鼠标悬停在下方的蝇王上，背景颜色变为橙色。 当鼠标移走，这种状态会消失，如果想使状态在鼠标离去之后还仍然保持鼠标放上去的状态。可以点
DOM操作
weixin_62824507的博客
03-07 1916
**文档对象模型( Document Object Model ,简称DOM)** , 是W3C组织推荐的处理可扩展标记语言( HTML 或者XML )的**标准编程接口。** W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
DOM（操作）
weixin_45789701的博客
11-19 2513
前端笔记4 JavaScript - DOM
DOM的操作
Mr_115的博客
11-01 2670
DOM的操作
DOM 简介及相关操作
icemwj的博客
09-21 868
1、DOM 简介 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 对于JavaScript，为了能够使 JavaScript 操作 HTML，JavaScript 就有了一套自己的 dom 编程接口。 对于HTML，dom 使得 html 形成一棵 dom 树， 包含文档、元素、节点。 我们获取过来的
dom操作html,浅谈JavaScript中的DOM操作
weixin_33988332的博客
06-20 380
Document Object Model(文档对象模型)，提供操作文档的方法。每个html文件都视为一篇文档，操作文档实际围绕HTML标签进行。本文为大家介绍了JavaScript中的dom操作。1、理解DOM：DOM(Document Object Model ，文档对象模型)一种独立于语言，用于操作xml，html文档的应用编程接口。从两个角度理解：对于JavaScript，为了能够使Jav...
JavaScript DOM操作
好好学习天天向上
03-27 5144
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JS面试题--DOM操作相关
一只胖胖胖miao
08-29 1716
（1）在DOM中操作中怎么创建、添加、删除、移除、替换、插入和查找节点 ①通过以下代码创建节点 createDocumentFragment()//创建一个DOM片段 createElement();//创建一个具体的元素 createTextNode();//创建一个文本节点 ②添加、移除、替换、插入节点 appendChild(); removeChild(); replaceCh...
易语言DOM操作
07-20
在易语言中，我们可以通过特定的API函数或内置模块来实现DOM的相关功能。以下是一些关于易语言DOM操作的关键知识点： 1. **解析XML/HTML**：首先，你需要加载XML或HTML文件到内存中。易语言提供如`读文件`等命令，...
JS实现的DOM插入节点操作示例
11-28
JavaScript DOM（Document Object Model）是用于操作HTML和XML文档的标准接口，它允许程序员或脚本动态更新、添加和删除文档的元素。在这个示例中，我们重点探讨如何使用`insertBefore()`方法来插入新的节点。 一、...
JavaScript DOM常用操作代码汇总
10-15
- 节点导航：`parentNode`、`children`、`childNodes`、`firstChild`、`lastChild`、`nextSibling`和`previousSibling`等属性帮助我们在DOM树中移动并访问相关节点。 - 文本获取：`innerHTML`包含元素及其子元素的...
JS DOM 操作实现代码
12-10
简单的表格: 代码如下: <table> <tr> ”TEST”...结果为4 百思不得其解,阅读相关资料后,发现原来JS中,空格也是作为一个文本节点,而两个input元素后面都有空格 所以都作为一个文本节点,所以结果为4 删除空格后结果为2 为
音频采集spring_ws_webrtc (html采集麦克风转gb711并发送广播播放)完整案例
最新发布
java之书-资源
08-21 118
springboot+webscoekt+webrtc 项目通过前端webrtc采集麦克风声音，通过websocket发送后台，然后处理成g711-alaw字节数据发生给广播UDP并播放。 后台处理项目使用线程池(5个线程)接受webrtc数据并处理g711-alaw字节数组放到Map容器中，在开一个线程实时获取Map容器中数据通过UDP发送。 项目采集采集麦克风数据稳定，个人已测试放心可用。
Java学习Day33：HTML 第三章：挟魂崖
weixin_51721783的博客
08-21 398
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。1、什么是dom？dom，全称Document Object Model文档对象模型，是 W3C 的标准；[所有浏览器公共遵守的标准]。用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。2、dom组成：由HTML、CSS、事件（交互）组成。
Javaweb学习之HTML（二）
2301_80841939的博客
08-17 650
TML 响应式 Web 设计（Responsive Web Design, RWD）是一种网页设计方法，它使得网站能够根据不同的访问设备（如桌面电脑、平板电脑、智能手机等）的屏幕尺寸和分辨率来自动调整布局、图片大小、字体等，从而提供最佳的浏览体验。但是，请注意，在HTML文档中直接使用Unicode编码字符时，需要确保文档的编码（如UTF-8）能够支持这些字符。HTML5引入了一些新的字符实体，主要用于表示一些数学符号、技术符号以及特殊字符等，但这些新的字符实体在日常的HTML编码中并不常用。
【HTML】为网页添加表单（控件）
weixin_51649465的博客
08-21 433
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。：一个表单中通常需要包含一些说明性的文字，提示用户进行填写和操作。：相当于一个容器，用来容纳所有的表单控件和提示信息。
Ext.Element：封装DOM操作的Ext核心工具
在DOM操作方面，介绍了访问和修改DOM元素的方法，如getElementById、getElementsByTagName等，以及创建、删除、替换和插入节点的相关方法。此外，还讨论了通过style属性控制DOM样式的灵活性。最后，引入了Ext框架中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值