JavaScript——6：操作DOM

已于 2022-02-18 16:39:38 修改
阅读量313 收藏 1
点赞数 1
分类专栏： web前端 文章标签： javascript
于 2021-04-28 15:23:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangfulin/article/details/116042043
版权

文章目录

一，DOM 基础

DOM (Document Object Model，文档对象模型）是 W3C 制定的一套用来描述 JavaScript 脚本怎样与 HTML 或 XML 文档进行交互的 Web 标准API。

HTML文档的树状结构包含表示HTML元素 和表示文本字符串的节点：

<html>
	<head>
		<time>Sample Document</time>
	</head>
	<body>
		<h1>An HTML Document</h1>
		<p>This is a <i>simple</i> document.</p>
	</body>
</html>

其结构如下：
在这里插入图片描述
每个方框是文档的一个节点，它表示一个Node节点对象。

（一）节点类型

DOM 规定：整个文档是一个文档节点，每个元素是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点…所以上面那段HTML中包含文档节点、元素节点和文本节点三种节点。

一些常用的节点类型如下：

节点类型说明
Document表示整个文档， DOM 树的根节点
Element表示元素
Attr表示属性
Text表示兀素或属性中的文本内容
Comment表示注释
Processinglnstruction表示处理指令

每个节点都有一个 nodeType 属性返回一个数值，用于表明节点的类型：

节点类型nodeType
Document9
Element1
Attr2
Text3
Comment8
Processinglnstruction7

看一个例子：遍历所有子节点

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>DOM</h1>
		<p>DOM是<cite>Document Object Model</cite>首字母简写，中文翻译为<b>文档对象模型</b>，是<i>W3C</i>组织推荐的处理可扩展标识语言的标准编程接口。</p>
		<ul>
			<li>D表示文档，HTML文档结构。</li>
			<li>O表示对象，文档结构的JavaScript脚本化映射。</li>
			<li>M表示模型，脚本与结构交互的方法和行为。</li>
		</ul>
		<script type="text/javascript">
			function count(n) { //定义文档元素统计函数
				var num = 0;
				if (n.nodeType == 1) {// 检查是否为元素节点
					num++;
				}
				var son = n.childNodes;
				for (var i = 0; i < son.length; i++) { // 循环统一每个子元素
					num += count(son[i]); // 递归操作
				}
				return num; // 返回统计值
			}
			console.log("当前文档包含 " + count(document) + " 个元素"); // 计算元素的总个数
		</script>
	</body>
</html>

在这里插入图片描述

（二）节点名称和值

使用节点的 nodeName 和 nodeValue 属性可以读取节点的名称和值。这两个属性的值完全取决于节点的类型：

节点类型nodeNamenodeValue
Document“#document”null
Element元素标签名null
Attr属性名属性名
Text“#text”元素节点和属性节点中的纯文本内容
Comment“#comment”注释文本内容
Processinglnstruction等同于 ProcessingInstruction.target 属性的值整个标签的文本内容

例子：显示所有节点的nodeName和nodeValue

在上面例子中的递归语句后添加：
console.log("nodeName:" + son[i].nodeName + " nodeValue:" + son[i].nodeValue);

（三）节点关系

在上面展示了一个树形结构，这棵树就是DOM文档树。

节点树的根、叶等概念和父子、兄弟等关系参考数据结构中树的基本概念，这里不再赘述。

二，使用节点

（一）访问节点

通过节点之间的树形关系，JavaScript 可使用 Node 类型的一些属性定位文档树中每个节点。

1，ownerDocument属性

Node.ownerDocument 只读属性以 Node 对象的形式返回当前节点的根节点。

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Example</title>
		<script>
			function getRootElemt(id) {
				var e = document.getElementById(id);
				console.log(e.ownerDocument);
			}
		</script>
	</head>
	<body style="border: solid green 3px">
		<p id="p1">Some outer text</p>
		<p id="p2">Some outer text</p>

		<div id="div1">
			<p id="div1p1">Some div1 text</p>
			<p id="div1p2">Some div1 text</p>
			<p id="div1p3">Some div1 text</p>

			<div id="div2" style="border: solid red 3px">
				<p id="div2p1">Some div2 text</p>
				<p id="div2p1">Some div2 text</p>
			</div>
		</div>

		<p  id="p3">Some outer text</p>
		<p  id="p4">Some outer text</p>

		<button onclick="getRootElemt('div1');">show nodes</button>
	</body>
</html>

在这里插入图片描述

也能通过document.documentElement获取根节点。

2，parentNode属性

Node.parentNode属性以 Node 对象的形式返回当前节点的父节点。

function getPareElemt(id) {
	var e = document.getElementById(id);
	console.log(e.parentNode);
}

<button onclick="getChilElems('div1');">show</button>

在这里插入图片描述

3，childNodes属性

Node.childNodes只读属性以 NodeList 对象的形式返回指定节点的所有子节点。

	function getChilElems(id) {
		var e = document.getElementById(id);
		var children = e.childNodes;
		var array = null;
		try {
			var array = Array.prototype.slice.call(children, 0);
		} catch (ex) {
			var array = new Array();
			for (var i = 0; i < children.length; i++) {
				array.push(children[i]);
			}
		}
		console.log(array);
	
		for (var i=0; i<children.length; i++) {
			console.log(children[i]);
		}
	}

<button onclick="getChilElems('div1');">show</button>
  • 将NodeList转为普通数组再展示内容。

在这里插入图片描述

4，firstChild属性

Node.firstChild 只读属性返回指定节点的第一个子节点.如果节点是无子节点，则返回null。

function getFirstChild(id) {id
	var d = document.getElementById(id);
	console.log(d.firstChild);
}

<button onclick="getChilElems('div1');">show</button>

在这里插入图片描述

5，lastChild属性

Node.lastChild只读属性返回当前节点的最后一个子节点。如果没有子节点，则返回 null。

function getLastChild(id) {
	var d = document.getElementById(id);
	console.log(d.lastChild);
}

console.log(d.lastChild.nodeName + " : " + d.lastChild.nodeValue);

在这里插入图片描述

6，nextSibling属性

Node.nextSibling 只读属性返回与指定节点有同一父节点的下一个节点。如果指定的节点为最后一个节点，则返回 null。

function getNextSibling(id) {
	var e = document.getElementById(id)
	var n = e.nextSibling;
	console.log(n.nodeName);
}

<button onclick="getNextSibling('div1p1');">show</button>

在这里插入图片描述

7，previousSibling属性

Node.previousSibling 只读属性返回与指定节点有同一父节点的上一个节点。如果指定的节点为第一个节点，则返回 null。

function getPreviousSibling(id) {
	var e = document.getElementById(id)
	var n = e.previousSibling;
	console.log(n.nodeType);
}

在这里插入图片描述

（二）操作节点

Node 类型为所有节点定义了很多方法 以方便对节点进行操作。

1，cloneNode()

Node.cloneNode() 方法返回调用该方法的节点的一个副本。

function cloneNode(id) {
	var e = document.getElementById(id)
	var n = e.cloneNode();
}

<button onclick="cloneNode('div1p1');">show</button>
  • 默认deep参数设为false，如果设为true，则会复制整棵DOM子树(包括那些可能存在的Text子节点)。

2，appendChild()

Node.appendChild() 方法将一个节点附加为指定节点的最后一个兄弟。

function append(id) {
	var sourceNode = document.getElementById(id); // 获得被克隆的节点对象
	var clonedNode = sourceNode.cloneNode(true); // 克隆节点
	clonedNode.setAttribute("id", "div3"); // 修改一下id 值，避免id 重复
	sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点
}

<button onclick="append('div2');">show</button>
  • 为了防止一个文档中出现两个ID重复的元素，使用cloneNode()方法克隆的节点需要在添加到页面前指定另外一个与原ID值不同的ID。
    在这里插入图片描述

3，insertBefore()

Node.insertBefore() 方法在指定节点之前插入另一个拥有相同父节点的节点。

function insertbefore(id) {
	var sourceNode = document.getElementById(id); // 获得被克隆的节点对象
	var clonedNode = sourceNode.cloneNode(true); // 克隆节点
	clonedNode.setAttribute("id", "div3"); // 修改一下id 值，避免id 重复
	sourceNode.parentNode.insertBefore(clonedNode, sourceNode); // 在父节点插入克隆的节点
}

<button onclick="append('div2');">show</button>

没有Node.insertAfter() 方法，但可以使用 insertBefore 和 Node.nextSibling 来实现：

parentDiv.insertBefore(sp1, sp2.nextSibling);

在第一个子元素的前面插入一个元素，可使用 firstChild 属性：

//获得第一个子节点的引用
var theFirstChild = parentElement.firstChild;
//在第一个子节点之前插入新元素
parentElement.insertBefore(newElement, theFirstChild);

4，hasChildNodes()

hasChildNodes()方法返回一个布尔值,表明当前节点是否包含有子节点。

function myFunction(id){
	var e=document.getElementById(id);
	console.log(e.hasChildNodes());
}

5，normalize()

Node.normalize() 方法将当前节点和它的后代节点规范化——合并相邻的文本节点并删除空的文本节点。

具体参考后面“使用文档节点”的内容。

6，removeChild()

Node.removeChild() 方法删除指定节点的指定子节点并返回被删除的节点。

function insertbefore(id) {
	var sourceNode = document.getElementById(id); // 获得被克隆的节点对象
	var clonedNode = sourceNode.cloneNode(true); // 克隆节点
	clonedNode.setAttribute("id", "div3"); // 修改一下id 值，避免id 重复
	sourceNode.parentNode.insertBefore(clonedNode, sourceNode); // 在父节点插入克隆的节点
}
function removehild(id) {
	var sourceNode = document.getElementById(id); 
	var clonedNode = document.getElementById("div3"); 
	sourceNode.parentNode.removeChild(clonedNode); 
}

<button onclick="insertbefore('div2');">先插入节点</button>
<button onclick="removehild('div2');">再删除节点</button>

7，replaceCbild()

Node.replaceChild() 方法用指定的节点替换当前节点的指定子节点，并返回被替换掉的节点。

function insertbefore(id) {
	var sourceNode = document.getElementById(id); // 获得被克隆的节点对象
	var clonedNode = sourceNode.cloneNode(true); // 克隆节点
	clonedNode.setAttribute("id", "div3"); // 修改一下id 值，避免id 重复
	sourceNode.parentNode.insertBefore(clonedNode, sourceNode); // 在父节点插入克隆的节点
}
function replacechild(id) {
	var sourceNode = document.getElementById(id); // 获得被克隆的节点对象
	var clonedNode = document.getElementById("p3"); // 克隆节点
	clonedNode.setAttribute("style", "border: solid yellow 3px")
	sourceNode.parentNode.replaceChild(clonedNode, sourceNode); // 在父节点替换克隆的节点
}

<button onclick="insertbefore('div2');">先插入节点</button>
<button onclick="replacechild('div3');">再替换节点</button>

8，contains()

Node.contains()方法返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。

function isInPage(id) {
	let e = document.getElementById(id);
	const result = (e === document.body) ? false : document.body.contains(e);
	console.log(result);
}

<button id="ta-example-one" onclick="isInPage('p3')">show</button>

在这里插入图片描述

以上都是对Node节点进行操作的通用方法，不同类型的Node节点有不同的特征、有不同的操作，接下来进行简单的介绍。

三，使用文档节点

在 DOM 中，Document 类型表示文档节点，可以在全局作用域中直接访问这个 document 对象。

1，访问文档子节点

（1）使用 childNodes 属性

使用前面提到的 childNodes 访问文档子元素：

function getChilElems() {
	var children = document.childNodes;
	var array = null;
	try {
		var array = Array.prototype.slice.call(someNode.childNOdes, 0);
	} catch (ex) {
		var array = new Array();
		for (var i = 0; i < children.length; i++) {
			array.push(children[i]);
		}
	}
	console.log(array);
	for (var i = 0; i < children.length; i++) {
		console.log(children[i]);
	}
}

（2）使用 all 属性

该属性返回一个包含了页面上的所有元素 HTMLAllCollection。

var all = document.all;

在这里插入图片描述

（3）访问其他子节点

属性作用
Document.head返回当前文档的 head 元素
Document.body返回当前文档的 body 或 frameset 节点
Document.doctype返回当前文档的文档类型定义
Document.documentElement该属性始终指向 HTML 页面中的 html 元素
function myFunction(){
	var head = document.head;
	var body = document.body;
	var documentElement = document.documentElement;
	console.log("head: "+head);
	console.log("body: "+body);
	console.log("documentElement: "+documentElement);
}

在这里插入图片描述
还能使用之前提到的访问节点的方法通过节点间关系访问节点。

2，访问文档信息

属性作用
Document.title设置返回当前文档的 title 标签包含的文本信息
Document.lastModified返回当前文档最后被修改的日期和时间
Document.domain设置或返回当前文档的域名
Document.location返回当前文档的 URI
Document.documentURI以字符串的类型，返回当前文档的路径。
Document.characterSet返回文档正在使用的字符集
function myFunction(){
	var title = document.title;
	var lastModified = document.lastModified;
	var domain = document.domain;	
	var location = document.location;
	var documentURI = document.documentURI;
	var characterSet = document.characterSet;
	console.log("title: "+title);
	console.log("lastModified: "+lastModified);
	console.log("domain: "+domain);
	console.log("location: "+location);
	console.log("documentURI: "+documentURI);
	console.log("characterSet: "+characterSet);
}

在这里插入图片描述

3，访问文档的元素

document 对象包含多个访问文档内元素的方法，简单说明如下：

方法作用
Document.getElementsByClassName()返回当前元素的所有指定类名的子元素
Document.getElementsByTagName()返回当前元素的所有指定元素名的子元素
Document.getElementsByName()返回当前元素的所有指定name属性名的子元素

4，访问文档集合

除了属性和方法， document 对象还定义了一些特殊的集合：

方法作用
Document.forms返回一个包含当前文档中所有表单元素 form 的列表
Document.links返回一个包含文档中所有超链接的列表
Document.images返回当前文档中所包含的图片的列表
Document.
Document.
Document.
function myFunction(){
	var forms = document.forms;
	var images = document.images;
	var links = document.links;
	console.log(forms);
	console.log(images);
	console.log(links);
}

四，使用元素节点

1，访问元素

方法作用
Document.getElementsByClassName()返回当前元素的所有指定类名的子元素
Document.getElementsByTagName()返回当前元素的所有指定元素名的子元素
Document.getElementsByName()返回当前元素的所有指定name属性名的子元素

还能使用之前提到的访问节点的方法通过节点间关系访问节点。

function myFunction(id){
	var e = document.getElementById(id); // 获取指定元素
	var ename = "nodeName：" + e.nodeName; // 获取该节点的名称
	var etype = e.nodeType; // 获取该节点的类型
	var efirstchild = e.firstElementChild; // 获取该元素的第一个子元素
	var elastchild = e.lastElementChild; // 获取该元素的最后一个子元素
	var eparent = e.parentNode;	// 获取该元素的父元素
	var eprevious = e.previousElementSibling; // 获取该元素的上一个相邻元素
	var enext = e.nextElementSibling; // 获取该元素的下一个相邻元素
	console.log(ename); // 显示提示信息
	console.log(etype);
	console.log(efirstchild);
	console.log(elastchild);
	console.log(eparent);
	console.log(eprevious);
	console.log(enext);
}

<button onclick="myFunction('div1');">show</button>

在这里插入图片描述

2，遍历元素

function getChilElems(id) {
	var e = document.getElementById(id);
	var children = e.childNodes;
	var array = null;
	try {
		var array = Array.prototype.slice.call(children, 0);
	} catch (ex) {
		var array = new Array();
		for (var i = 0; i < children.length; i++) {
			array.push(children[i]);
		}
	}
	console.log(array);
	
	for (var i=0; i<children.length; i++) {
		console.log(children[i]);
	}
}

<button onclick="getChilElems('div1');">show</button>

3，创建元素并插入节点

Document.createElement() 方法创建一个由标签名称 tagName 指定的 HTML 元素。

插入节点的方法参考前面提到的Node.insertBefore() 方法和Node.appendChild() 方法。

function addElement() {
	// 创建一个新的 div 元素
	let newDiv = document.createElement("div");
	// 给它一些内容
	let newContent = document.createTextNode("Hi there and greetings!");
	// 添加文本节点到这个新的 div 元素
	newDiv.appendChild(newContent);
	// 将这个新的元素和它的文本添加到 DOM 中
	let currentDiv = document.getElementById("div1");
	document.body.insertBefore(newDiv, currentDiv);
}

4，复制、替换和删除节点

参考前面的Node.cloneNode() 方法、Node.replaceChild() 方法方法和Node.removeChild() 方法。

5，获取焦点元素

document.activeElement()方法返回当前在DOM或者shadow DOM树中处于聚焦状态的元素。

function active() {
	const activeButton = document.activeElement;
	console.log(activeButton.getAttribute("id"));
}

<button id="ta-example-one" onclick="active()">show</button>

在这里插入图片描述

Document.hasFocus() 方法判断当前文档或者当前文档内的节点是否获得了焦点。

function active() {
	const activeButton = document.activeElement;
	console.log(activeButton.localName);
	if (document.hasFocus()) {
		console.log(activeButton.getAttribute("id"));
	}
}

<button id="ta-example-one" onclick="active()">show</button>

在这里插入图片描述

五，使用文本节点

文本节点由 Text 类型表示，包含纯文本内容，或转义后的 HTML 字符，但不能包含HTML代码。比如：

<!-- 下面div不包含文本节点 -->
<div></div>
<!--下面div包含文本节点，值为空格-->
<div> </div>
<!--下面div包含文本节点，值为换行符-->
<div>
</div>
<!--下面div包含文本节点，值为" Hello World!" -->
<div>Hello World!</div>

（一）访问文本节点

使用文本节点的 nodeValue 属性或 data 属性可以访问或设置 Text 节点中包含的文本。

<body style="border: solid green 3px">
	<p id="p1">Some outer text1</p>
	<p id="p2">Some outer text2</p>
	<div id="div1" style="border: solid blue 3px">
		<p id="div1p1">Some div1 text1</p>
		<p id="div1p2">Some div1 text2</p>
		<p id="div1p3">Some div1 text3</p>
		
		<div id="div2" style="border: solid red 3px">
			<p id="div2p1">Some div2 text1<1/p>
			<p id="div2p2">Some div2 text2<span id="span1">测试</span></p>
		</div>
	</div>
	
	<p id="p3">Some outer text3</p>
	<p id="p4">Some outer text4</p>
	
	<button onclick="myFunction('div1')">show</button>
</body>

function myFunction(id) {
	var div = document.getElementById(id);
	var text = div.firstChild;
	console.log(text);
	text = div.childNodes[1].firstChild.nodeValue;
	console.log(text);
};

在这里插入图片描述
再结合前面遍历元素打印出的内容，我们就能判断这里的div.firstChild获得的div1的第一个子节点是一个Text类型，其nodeValue和data都是“回车+Tab”，确实我们在div1与其第一个p元素间使用了回车键和Tab键。div1的第二个子节点是一个Element类型，其第一个子节点就是一个Text类型其nodeValue和data都是“Some div1 text1”，因为我们没有在它所在的元素中使用回车与Tab，这直接就能看出来。

（二）创建并插入文本节点

Document.createTextNode()方法创建一个新文本节点。

插入节点的方法参考前面提到的Node.insertBefore() 方法和Node.appendChild() 方法。

function addTextNode() {
	// 创建一个新的 div 元素
	let newDiv = document.createElement("div");
	// 给它一些内容
	let newContent = document.createTextNode("Hi there and greetings!");
	// 添加文本节点到这个新的 div 元素
	newDiv.appendChild(newContent);
	// 将这个新的元素和它的文本添加到 DOM 中
	let currentDiv = document.getElementById("div1");
	document.body.insertBefore(newDiv, currentDiv);
}

（三）操作文本节点

参考前面的Node.cloneNode() 方法、Node.replaceChild() 方法方法和Node.removeChild() 方法操作文本节点。
使用CharacterData的属性操作文本节点中的文本内容。

function addTextNode() {
	// 创建一个新的 div 元素
	let newDiv = document.createElement("div");
	// 创建一个新的文本节点
	let newContent = document.createTextNode("Hi there a
	// 给文本节点再追加一些内容
	newContent.appendData("You too!");
	console.log(newContent.length);
	// 给文本节点再插入一些内容
	newContent.insertData(31, "Happy!");
	console.log(newContent.length);
	// 添加文本节点到这个新的 div 元素
	newDiv.appendChild(newContent);
	// 将这个新的元素和它的文本添加到 DOM 中
	let currentDiv = document.getElementById("div1");
	document.body.insertBefore(newDiv, currentDiv);
	// 给文本节点删除一些内容
	newContent.deleteData(31, 7);
	console.log(newContent.nodeValue);
	// 提取文本节点的一些内容
	let sub = newContent.substringData(31, 7);
	console.log(sub);
	// 替换文本节点的一些内容
	newContent.replaceData(31, 8, "What's up?");
	console.log(newContent.nodeValue);
}

（四）操作 HTML 字符串

元素的 innerHTML 属性设置或获取HTML语法表示的元素的后代。

六，使用属性节点

属性节点由 Attr 类型表示。

尽管属性也是节点，但是 DOM 没有提供相关直接引用，通常用 getAttribute()、 setAttribute()和 removeAttribute()等方法来操作属性。

（一）创建属性节点和设置属性节点的值

Document.createAttribute() 方法创建并返回一个新的属性节点。

Element.setAttribute()方法设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

function myFunction() {
	var element = document.getElementById("div1");
	var attr = document.createAttribute("align");
	attr.value = "center";
	element.setAttributeNode(attr);
	console.log(element.attributes["align"].value);
}

（二）读取和删除属性节点

Element.getAttribute()方法返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 “”。

Element.removeAttribute()方法从指定的元素中删除一个属性。

function myFunction() {
	var element = document.getElementById("div1");
	console.log(element.attributes["align"].value);
	console.log(element.getAttribute("align").value);
	element.removeAttribute("align");
	console.log(element.getAttribute("align"));
}

到此为止，关于 DOM 的相关概念与操作就简单介绍完了。

七，一个例子

使用 script 加载远程数据

script 元素能够动态加载外部或远程 JavaScript 脚本文件。 JavaScript 脚本文件不仅仅可以被执行，还可以附加数据。在服务器端使用 JavaScript 文件附加数据之后， 当在客户端使用 script 元素加载这些远程脚本时，附加在 JavaScript 文件中的信息也一同被加载到客户端，从而实现数据异步加载的目的。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>异步信息交互</title>
		<script type="text/javascript">
			function callback(info) {
			//客户端回调函数
				alert(info);
			}

			function request(url) {
			/* 
			创建<script>标签
			参数： URL 表示要请求的服务器端文件路径
			返回值： 无
			*/
				if (!document.script) {
					document.script = document.createElement("script");
					document.script.setAttribute("type", "text/javascript");
					document.script.setAttribute("src", url);
					document.body.appendChild(document.script);
				} else {
					document.script.setAttribute("src", url);
				}
			}

			window.onload = function() {
				var b = document.getElementsByTagName("input")[0];
				b.onclick = function() { //为页面按钮绑定异步请求函数
					request("server.js");
				}
			}
		</script>
	</head>
	<body>
		<h1>客户端信息提交页面</h1>
		<input name="submit" type="button" id="submit" value="向服务器发出请求">
	</body>
</html>

server.js：
//服务器端响应页面
callback("这里是服务器端数据信息");

改进：在url中传递参数。

<html>
	<head>
		<title>异步信息交互</title>
		<script type="text/javascript">
			function callback(info) {
				alert(info);
			}

			function request(url) {
				if (!document.script) {
					document.script = document.createElement("script");
					document.script.setAttribute("type", "text/javascript");
					document.script.setAttribute("src", url);
					document.body.appendChild(document.script);
				} else {
					document.script.setAttribute("src", url);
				}
			}

			window.onload = function() {
				var b = document.getElementsByTagName("input")[0];
				b.onclick = function() {
					var url = "server(gb2312).asp?callback=callback"
					request(url);
				}
			}
		</script>

		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	</head>
	<body>
		<h1>客户端信息提交页面</h1>
		<input name="submit" type="button" id="submit" value="向服务器发出请求" />
	</body>
</html>

server(gb2312).asp文件：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
callback = Request.QueryString("callback")
Response.Write("callback('Hi，大家好，我是从服务器端过来的信息使者.')")
%>
dangfulin
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript高级程序设计 第十四章---DOM 文档对象模型
weixin_40794404的博客
09-03 1134
第十四章 本章内容 理解文档对象模型（DOM）的构成 节点类型 浏览器兼容性 MutationObserver 接口 文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级 任何HTML 或XML 文档都可以用DOM表示
JavaScript—————DOM
Paige's Blog
10-27 260
可以使用JavaScript提供的DOM对象的方法和属性对 标记文档（html，xml）进行操作 首先将文档里的所有内容封装成对象，再使用DOM解 析html。 一、DOM中的对象 document对象：整个html文档 element对象：元素/标签对象 属性对象 文本对象 Node对象：以上对象的父对象 1.document对象 常用方法： ——write()：向页面输
JavaScript（第六章）：操作DOM对象
weixin_43432438的博客
05-12 207
JavaScript（第六章）：操作DOM对象 获得节点 操作节点 删除节点 插入节点：1.appendchild 2.insertBefore
JavaScript 13 更新、删除、创建和插入 DOM节点
小哞^同^学的技术博客
07-27 220
4.4 更新 DOM 节点 节点.innerText = "修改的文本的值" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id = "id1"> </div> <script> let i
JS 第六讲 DOM编程
weixin_45514133的博客
07-04 286
DOM编程
JavaScript DOM用document.createElement()生成元素，用seAttribute()函数设置属性值
热门推荐
ios0213的专栏
05-22 1万+
利用JavaScript DOM生成元素 如下步骤： var para=document.createElement("div"); para.setAttribute("id","slideshow"); var img=document.createElement("img"); img.setAttribute("id","img"); img.setAttribute("src","
JS——DOM操作
aixuexide3236的博客
11-21 485
DOM概念 事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、Ac
JavaScript——DOM操作——Window.document对象详解
10-21
下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript——DOM
07-03
JavaScript——DOM DOM，全称为“Document Object Model”，即文档对象模型，是W3C组织定义的一种标准，用于表示HTML或XML文档的结构，并提供了一种程序化访问和操作文档内容的方法。JavaScript作为浏览器端最常用...
JavaScript程序设计——DOM访问实验报告.docx
11-11
实验报告的主题是“JavaScript程序设计——DOM访问”，其目的是深入理解和掌握DOM（Document Object Model）在JavaScript中的应用，包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示，允许...
javascript中DOM总结（二）
weixin_47450807的博客
03-08 253
javascript中DOM总结（二） 使用Nodelist NodeList，和HTMLColletion,以及NamedNodeMap是实时的。所以下面的循环是无限循环 let div = document.getElementsByTagName("div"); for(let i =0;i<div.length;i++){ let ele = document.createElement("div"); ele.appendChild(document.crea
动态添加script标签
Amen的博客
07-02 2334
let setScript = document.createElement("script"); setScript.setAttribute("type", "text/javascript"); setScript.setAttribute("src", "https://aaa"); setScript.setAttribute("id", "aa"); document.body.insertBefore(secScript, document.body.lastChild); // 或者最后一.
DOM—操作元素（H5自定义属性） 节点操作（子、父、兄弟节点， 创建、添加节点， 删除节点，复制节点）
m0_59030524的博客
02-21 2460
1. H5自定义属性 目的：用于保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 由于有些自定义属性很容易引起歧义，难以判断是元素内置属性还是自定义属性。 H5给我们新增了自定义属性： 1.1 设置H5自定义属性 H5规定自定义属性 date-开头作为属性名并且赋值 如: <div date-index = "1" ></div> ...
第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、 查看/修改/删除属性节点、创建和增加节点）
Fiki515的博客
04-24 1478
一、查看节点 getElementById( ) getElementsByName( ) getElementsByTagName( ) <body> <div id="box">hello box</div> </body> <script> var oDiv = document.getElementById("box"); //div元素对象 // var oDiv = document..
JavaScript DOM学习笔记
Samuel的博客
08-13 647
DOM（Document Object Model） dom提供了操作html和xml的机会，他是一个操作html和xml功能的一类对象的集合 DOM的基本操作 document代表整个文档 NodeList，一种节点集合 有item(x)方法（与NodeList[x]效果一样） HTMLCollection，HTML文档中的一种集合类型 该集合是对元素的引用，也就是说不是元素的闪照 有item(x)方法；有namedItem(name)方法，通过标签的name属性获取某一项的引用（可以直接用中括号使用如
JavaScript——详细学习笔记
一名编程小白的Java学习日志
07-11 612
学习视频B站狂神说Java：https://www.bilibili.com/video/BV1JJ41177di 1、什么是JavaScript？ 1.1、概念 JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 JavaScript本来应该叫LiveScript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript.
CSS学习（10）行盒盒模型
b4834988的博客
09-22 150
常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点： 1.盒子沿着内容延伸 2.行盒不能设置宽高，调整行盒的宽高，应使用字体大小、行高、字体类型，间接调整 3.内边距（填充区）、边框、外边距 水平方向有效，垂直方向仅会影响背景，不会实际占据空间 行块盒 display：inline-block 不会换...
Dom（六） 事件操作
Oliver尹的博客
08-16 220
事件操作 EventTarget 是一个可接收事件的对象接口，并且可以创建监听器，例如window，document等这些是最常见的监听目标 事件注册 EventTarger.addEventListener(type,listener,useCapture) type：指的是创建事件的类型，例如，点击事件click，鼠标移动事件mouseover等 listener：回调函数，需要写...
全局 DOM 变量
weixin_30466421的博客
05-11 131
全局 DOM 变量 你可能已经知道，声明一个全局变量（使用 var 或者不使用）的结果并不仅仅是创建一个全局变量，而且还会在 global 对象（在浏览器中为 window ）中创建一个同名属性。 还有一个不太为人所知的事实是：由于浏览器演进的历史遗留问题，在创建带有 id 属性的 DOM 元素时也会创建同名的全局变量。例如： <div id="foo"></div> 以及...
JavaScript入门指南：第8版——精通CSS、DOM、Ajax、jQuery
8. **CSS与DOM**：虽然主要关注JavaScript，但也会涉及CSS样式的应用和DOM（Document Object Model）的使用，帮助理解如何操作网页结构。 9. **Ajax**：解释异步JavaScript和XML技术，用于实现页面无刷新更新内容。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值