JS基础9（DOM2）

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

Attribute系列方法

  1. 三种方法
    set/getAttribute()
    removeAttribute()
    【注】都是操作当前元素节点中某个属性的
window.onload = function(){
	var oDiv = document.getElementById("div1");
	//alert(oDiv.title);//hello
	//alert(oDiv.className);//box
	alert(oDiv.getAttribute("title"));//hello

	//可以进行修改
	//oDiv.title = "xxx";
	//oDiv.className = "box3";
	oDiv.setAttribute("title","xxx");

/*
	上述两种方式的区别
	<1>class属性范围区别，点操作是通过className,而set/getAttribute是通过class
	<2>set/getAttribute是用户自定义属性支持。
	<3>removeAttribute
*/	alert(oDiv.getAttribute("class"));//box
oDiv.setAttribute("class","yyy");
	
	//设置用户自定义属性
	oDiv.xxx = "yyy";//这种情况 并不会添加属性
	oDiv.setAttribute("xxx","yyy");

	oDiv.removeAttribute("title");//此时删除了属性title
	oDiv.title = "";//不能将属性删除，只能将属性置空

}
<div id = "div1" title="hello" name = "world" class = "box"></div>
  1. 元素节点属性
    （1）childNodes 获取当前元素节点的所有的子节点，包括两种节点类型
    1、元素节点
    2、文本节点
window.onload = function(){
	var oDiv = document.getElementById("div1");
	alert(oDiv.childNodes);//[object NodeList]  装有当前元素节点所有的子节点
	alert(oDiv.childNodes.length);//3
}
<div id = "div1"><em>斜体</em>文本内容<strong>粗体</strong></div>

（2）DOM节点类型
元素节点 文本节点 属性节点
【注】节点可以分为元素节点、属性节点和文本节点，而这些节点又有三种非常有用的属性，分别为 nodeName、nodeType 和 nodeValue
在这里插入图片描述

window.onload = function(){
//元素节点				    alert(oDiv.childNodes[0].nodeName);//EM
alert(oDiv.childNodes[0].nodeType);//1
alert(oDiv.childNodes[0].nodeValue);//null

//文本节点
alert(oDiv.childNodes[1].nodeName);//#text
alert(oDiv.childNodes[1].nodeType);//3
alert(oDiv.childNodes[1].nodeValue);//文本内容

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

（3）firstChild 快速找到当前元素节点子节点的第一个
lastChild 快速找到元素节点子节点的最后一个

window.onload = function(){
alert(oDiv.firstChild.nodeName);//EM
alert(oDiv.lastChild.nodeName);//STRONG
}
<div id = "div1"><em>斜体</em>文本内容<strong>粗体</strong></div>

【注】包括回车  换行 tab键  空格  字符
window.onload = function(){
	var oDiv = document.getElementById("div1");
	alert(oDiv.childNodes.length)//5
}

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

【注】包括回车  换行 tab键  空格  字符
window.onload = function(){
	var oDiv = document.getElementById("div1");
	/*【问题】如何将空白节点取出
	【注】识别出空白节点
	/^\s+$/.test()   使用左侧的正则去进行验证，如果是空白节点，返回true，否则返回false
	*/
	alert(/^\s+$/.test("   "));//true
	alert(/^\s+$/.test("1   "));//true
	alert(oDiv.childNodes.length);//5
	var nodes = removeSpceNode(oDiv.childNodes);
	alert(nodes.length);//3
}
//删除空白节点
function removeSpaceNode(nodes){
	var result = [];//用来存放不是空白节点的节点
	for(var i = 0;i<nodes.length;i++){
		//判断是否是空白节点
		if(nodes[i].nodeType == 3 &&  /^\s+$/.test(nodes[i].nodeValue)){
			continue;
		}
		result.push(nodes[i]);
	}
	return result;
}
<div id = "div1">
	<em>斜体</em>
	文本内容
	<strong>粗体</strong>
</div>

使用firstChild lastChild
必须从父节点上删除空白节点

window.onload = function(){
	var oDiv = document.getElementById("div1");
	removeSpaceNode2(oDiv);
	//alert(oDiv.childNodes.length);//3
	//alert(oDiv.firstChild.nodeName);//EM
//【注】删除数组元素的时候，必须倒序删除
	}
	function removeSpaceNode2(parent){
		var nodes = parent.childNodes;
		for (var i = nodes.length -1 ;i>= 0;i--){
		if(node[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
		//删除该空白节点
		parent.removeChild(nodes[i]);
		}
		}
	}

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

（4）ownerDocument属性
【注】返回该节点的文档对象根节点，返回的对象相当于document
alert(box.ownerDocument === document);//true 根节点

window.onload = function(){
	var oDiv= document.getElementById("div1");
	alert(oDiv.ownerDocument == document);//true
}

<div id = "div1"></div>

（5）parentNode 属性返回该节点的父节点
previousSibling 属性返回该节点的前一个同级节点
nextSibling 属性返回该节点的后一个同级节点

window.onload = function(){
	var oDiv= document.getElementById("div1");
	//alert(oDiv.parentNode.nodeName);//BODY
removeSpaceNode2(oDiv.parentNode)	//alert(oDiv.previousSibling.nodeName);//SPAN
alert(oDiv.nextSibling.nodeName);//P
}
function removeSpaceNode2(parent){
		var nodes = parent.childNodes;
		for (var i = nodes.length -1 ;i>= 0;i--){
		if(node[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
		//删除该空白节点
		parent.removeChild(nodes[i]);
		}
		}
	}

<span></span>
<div id = "div1"></div>
<p></p>

（5）属性节点 attribute
返回该节点的属性节点【集合】
集合特点：1、不重复 2、无序

属性
attributes.length 返回属性节点个数

window.onload = function(){
	var oDiv = document.getElementById("div1");
	alert(oDiv.attributes);//[object NameNodeMap]
	alert(oDiv.attributes.length);//4

	//访问其中一个属性节点
alert(oDiv.attributes.getNamedItem("id"));//object Attr
alert(oDiv.attributes["id"]);//object Attr

	//属性节点
	nodeName   nodeType  nodeValue
	  属性名		 类型2		值
	alert(oDiv.attributes["id"].nodeName);//id
	alert(oDiv.attributes["id"].nodeType);//2
	alert(oDiv.attributes["id"].nodeValue);//div1
}

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

（6）节点操作
①document.write()
【注】document.write()添加内容的时候， 会将原有的页面上的内容覆盖掉

#div1{
	width:300px;
	height:300px;
	background:red
}

window.onload = function(){
	var oBtn = document.getElementById("btn");
	oBtn.onclick = function(){
		document.write("<h1>我是标题内容</h1>");
		//【注】document.write()添加内容的时候， 会将原有的页面上的内容覆盖掉
	}
}

<div id = "div1"></div>
<button id = "btn"></button>

②createElement()
【格式】document.createElement(标签名);
appendChild()
【格式】parent.appendChild(newNode)
功能：将newNode插入到parenet子节点的末尾
createTextNode()
【格式】document.createTextNode(文本)
功能：创建文本节点
【注】创建一个带文本的元素节点（封装）

window.onload = function(){
	var oBtn = document.getElementById("btn");
	var oDiv = document.getElementById("div1");
	oBtn.onclick = function(){
	//1、创建span节点
	var node = document.createElement("span");
	alert(node);//只是进行了创建该节点，并没有插入该节点
	oDiv.appendChild(node);//创建了该节点，并把它插入到了div1中，但是并没有文本信息
	//2、给span节点中添加文本
	var oText = document.createTextNode("文本内容");
	//3、将文本插入到节点中
	node.appendChild(oText);
	//4、将节点插入到div中
	oDiv.appendChild(node);
	}
}

<div id = "div1">
	<p>p</p>
	<em>斜体</em>
</div>
<button id = "btn"></button>

创建一个带文本的元素节点（封装）
window.onload = function(){
	var oDiv = document.getElementById("div1");
	oBtn.onclick = function(){
		var node = createElementWithTxt("span","文本内容");
		oDiv.appendChild(node);
	}
}

function createElementWidthTxt(tagName,txt){
	var node = document.createElement(tagName);
	var oTxt = document.createTextNode(txt);
	node.appendChild(oTxt);
	return node;
}

<div id = "div1">
	<p>p</p>
	<em>斜体</em>
</div>
<button id = "btn"></button>

③insertBefore()
【格式】父节点.insertBefore(插入的节点，旧节点)；
功能：将插入的节点插入到旧节点之前

window.onload = function(){
	//创建一个<strong>  将这个节点插入到span节点之前
//<1>创建strong
var node = createElementWithTxt("strong","strong文本");

var oSpan = document.getElementByTagName("span")[0];
//<2>进行插入
oSpan.parentNode.insertBefore(node,oSpan);//strong节点插入到span节点之前

insertAfter(node,oSpan);
【注】DOM里面insetAfter()这个方法是没有的，可以自己去封装
}

function createElementWidthTxt(tagName,txt){
	var node = document.createElement(tagName);
	var oTxt = document.createTextNode(txt);
	node.appendChild(oTxt);
	return node;
}

function insertAfter(newNode,oldNode){
	//判断oldNode是否是最后一个节点
	var parent = oldNode.parentNode;
	if(oldNode == parent.lastChild){
		//最后一个节点，直接插入到子节点的末尾
		parent.appendChild(newNode);
	}else{
		//插入到oldNode的下一个节点之前
		parent.insertBefore(newNode,oldNode.nextSibling);
	}
}

<div id = "div1">
	<p>p</p>
	<span>span</span>
	<em>em</em>
</div>

④replaceChild()
【格式】parent.replaceChild(newNode,oldNode);
功能：用newNode将oldNode给替换掉

cloneNode()
【格式】node.cloneNode()
返回值：新克隆出来的节点
参数：true 默认是false 如果传true，就会复制元素节点中的innerHTML

removeChild()
【格式】node.parentNode.removeChild(node);
功能：删除节点

window.onload = function(){
 var oDiv = document.getElementById("div1");
 var node = document.createElement("strong");

 //oDiv.parentNode.replaceChild(node,oDiv);//原来的div直接替换成strong标签
  var oDiv = document.getElementById("div1");
  var oSpan = document.getElementByTagName("span")[0];
  var node = oDiv.cloneNode(true);
  //将div添加到span节点的前面
  oSpan.parentNode.insertBefore(oDiv,oSpan);

  oDiv.parentNode.removeChild(oDiv);
}

<span>span</span>
<div id= "div1">div</div>
<p>p</p>
Alley_h.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础-动态操作DOM节点
weixin_50909662的博客
10-12 484
我们所说的操作无非就是增删改查（CRUD） 创建一个节点（向页面中增加之前，我们需要先创建一个节点出来） 向页面中增加一个节点 删除页面中的某一个节点 修改页面中的某一个节点 获取页面中的某一个节点 创建节点 创建元素节点 createElement var pEle = document.createElement('p') console.log(pEle) // <p></p> 创建文本节点 createTextN...
JavaScript学习笔记之DOM基础操作实例小结
10-17
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
JavaScript基础——DOM
NGUP_LEE的博客
03-22 1534
文章目录1、Web API2、DOM2.1 DOM 简介2.2 DOM树2.3 DOM对象3、获取DOM元素3.1 根据CSS选择器获取DOM元素3.1.1 选择匹配的第一个元素3.1.2 选择匹配多个元素3.2 其他方法获取DOM元素4、设置DOM元素的内容4.1 document.write()方法4.2 对象.innerText属性4.3 对象.innerHTML属性4.4 区别5、修改DOM元素的内容6、设置、修改元素样式属性6.1 通过style属性操作CSS7、定时器、间歇函数7.1 开启定时器
JavaScript基础(DOM编程基础)
qq_52215881的博客
10-11 469
JS基础(DOM编程基础)
JavaScript 基础 【DOM】
在人间负债^
05-02 1149
这里写自定义目录标题什么是 DOM模型节点事件DOM 的基本方法获取元素节点获取元素节点的子节点获取父节点和兄弟结点 什么是 DOM DOM，全程是 Document Object Model 文档对象模型。 JS 中通过 DOM 来对 HTML 文档进行操作。只要了解 DOM 就可以随心所欲的操作 WEB 页面。 文档：文档表示的就是整个 HTML 网页文档 对象：对象表示将网页中的每一个部分都转换成了一个对象 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。 模型 节点 节点：Node
JavaScript DOM基础
程序员柒的博客
07-18 1638
本文简单的讲解了JavaScript的DOM基础，适合初学的朋友们，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（DocumentObjectModel，DOM）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。编程接口。......
【JS基础】DOM和BOM
cannotbecounted的博客
07-03 641
对JS基础知识DOM和BOM进行简要的介绍。
js基础之DOM尺寸及位置
时光清浅处，一步一安然
08-11 748
js基础之DOM尺寸及位置 一、DOM尺寸 以下表格属性中，前三种属性都是只读属性 属性 描述 box.style.width，box.style.height 只能获取到内联style属性的CSS样式中的宽和高，如果有，获取。如果没有，则返回空 getStyle(box, “width”)，getStyle(box, “width”) 通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。如果本身设置大小，它会返回元素的大小，如果本身没有设置，非IE浏
JS基础知识DOM+BOM
m0_59550122的博客
03-19 1539
js BOM DOM部分基础知识学习笔记（1）
JavaScript基础学习 DOM
柠檬味小发糕的博客
12-14 511
JavaScript基础学习 DOMDOM获取元素获取特殊元素 html与body事件三要素innerText与innerHTML的区别分时间问候案例 DOM获取元素 <!DOCTYPE html> <html> <head> <title>DOM开始学习</title> </head> <body> <div id="time">2021-12-13</div>
【JS基础】DOM的一些基础操作
m0_62599305的博客
01-25 973
DOM（Document Object Model）是一种用于表示和操作HTML或XML文档的接口。通过DOM，我们可以使用JavaScript来动态地操纵文档的结构、内容和样式。DOM 提供了一种树形结构的方式，将文档表示为一个由节点组成的层次结构。在本文中，我们将介绍一些基础的DOM操作，帮助初学者了解如何使用JavaScript与网页交互。DOM(Document Object Model–文档对象模型)是用来呈现以及与任意 HTML或 XML文档交互的API。
js学习总结之dom2级事件基础知识详解
10-19
DOM2级事件是JavaScript中处理用户交互和页面动态更新的关键部分。在DOM2级事件模型中，事件处理有了更高级别的灵活性和控制力，相比于早期的DOM0级事件绑定方式。DOM0级事件绑定简单直观，但存在一些限制，比如只能...
js基础，DOM操作总结
05-11
js基础，DOM操作总结
JavaScript操作HTML DOM节点的基础教程
10-22
主要介绍了JavaScript操作HTML DOM节点的基础入门教程,包括对节点的创建修改删除等操作,还特别提到了其中appendChild()与insertBefore()插入节点时需注意的问题,需要的朋友可以参考下
【React 】开发环境搭建详细指南
lph159的博客
07-24 1125
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 164
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 127
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 592
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
JavaScript基础：DOM编程与Window对象特性
"Window对象是JavaScript中的全局对象，它表示浏览器窗口，包含了许多与浏览器交互相关的属性和方法。在JavaScript中，所有的全局变量和函数都自动成为Window对象的成员。本章将深入探讨Window对象的常用属性，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值