DOM Scripting 学习前-一些DOM命令1

最新推荐文章于 2023-08-24 19:25:22 发布

Darcyyyy

最新推荐文章于 2023-08-24 19:25:22 发布

阅读量402

点赞数

分类专栏：前端文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/Darcyyyy/article/details/126096291

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

getElementById

功能：

允许您直接访问具有指定id的元素节点。id只接受一个参数：您要获取的元素的id。

语法：

document.getElementById(id)

示例：

document.getElementById("purchases")

typeof

功能：

返回对象的类型。这将告诉您对象是a string, a number, a function, a Boolean value, or an object。

语法：

typeof something

示例：

typeof document.getElementById("purchases"))

object

getElementsByTagName

功能：

可以立即访问由指定标记填充的数组

语法：

element.getElementsByTagName(tag)

示例：

document.getElementsByTagName("li")

alert

功能：

弹窗

语法：

alert(something)

示例：

alert(document.getElementsByTagName("li").length);

在浏览器中弹出一个显示<li>节点个数的窗口

getAttribute

功能：

获取元素的属性

语法：

object.getAttribute(attribute)

示例：

<p title="abc">This is a test with title</p>

var paras = document.getElementsByTagName("p");
paras[0].getAttribute("title"))

“abc”

setAttribute

功能：

更改属性节点的值

语法：

object.setAttribute(attribute,value)

示例：

var shopping = document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");

Event handlers

功能：

事件处理程序用于在某个操作发生时调用某些JavaScript。

语法：

event = "JavaScript statement(s)"

示例：

onclick = "showPic(this);"

这将使用onclick事件处理程序调用showPic函数。

通过向onclick事件处理程序所包含的JavaScript中添加一个返回的假语句，我可以阻止用户被直接带到链接的目的地：

onclick = "showPic(this); return false;"

示例：

<a href="images/fireworks.jpg" onclick="showPic(this); return false;" title="A fireworks display">Fireworks</a>

childNodes

功能：

子节点属性是获取有关文档节点树中任何元素的子节点的信息的一种方法。子节点返回一个包含元素节点的所有子节点的数组

语法：

element.childNodes

示例：

var body_element = document.getElementsByTagName("body")[0];
body_element.childNodes

你可以找出“body”元素中到底有多少个子节点。因为childNodes返回一个数组，你可以使用length属性来了解它包含多少元素：

body_element.childNodes.length;

window.onload = function

功能：

希望在页面加载时执行function函数，并且可以使用加载事件处理程序来执行此操作。将这一行添加到代码的末尾。

示例：

function countBodyChildren() {
	var body_element = document.getElementsByTagName("body")[0];
	alert (body_element.childNodes.length);
}
window.onload = countBodyChildren;

当文档加载时，将调用countBodyChildren子函数。在Web浏览器中刷新html文件，您将收到一个包含“body”元素的子元素总数的弹窗。这个结果可能会让你感到吃惊。

nodeType

查看html文件的结构，body元素似乎只有三个子元素：h1元素、ul元素和img元素。然而，当我们调用countBodyChildren函数时，我们得到了一个更高的数字。这是因为元素只是节点的一种类型。childNodes属性返回一个包含所有类型节点的数组，而不仅仅是元素节点。它还将返回所有的属性节点和文本节点。事实上，文档中的几乎所有东西都是某种节点。甚至空格和换行符被解释为节点，并包含在子节点数组中。这就解释了为什么countBodyChildren产生的结果如此之高。

幸运的是，我们可以在文档中的任何节点上使用nodeType属性

语法：

node.nodeType

示例：

body_element.nodeType

刷新正在显示html的浏览器窗口。现在，您将看到一个包含数字1的警报对话框。元素节点的节点类型值为1。
nodeType有12个可能的值，但其中只有3个将具有非常实际的用途：元素节点、属性节点和文本节点的nodeType值。它们的节点类型值分别为1、2和3。
这意味着您可以针对函数中的特定类型的节点。例如，您可以创建一个只影响元素节点的函数。

nodeValue

功能：

如果要更改文本节点的值，则有一个名为nodeValue的DOM属性，可用于获取（并设置）节点的值：

语法：

node.nodeValue

示例：

description.childNodes[0].nodeValue

firstChild and lastChild

功能：

有一种简写的方式来写childNodes[0]。当您想要获得第一个节点数组中的第一个节点的值时，您可以使用firstChild。

语法：

node.firstChild

这相当于

node.childNodes[0]

文档对象模型还提供了相应的最后子属性：

node.lastChild

这是指子节点数组中的最后一个节点。如果您想访问此节点而不使用lastChild属性，则必须写入：

node.childNodes[node.childNodes.length-1]

这显然非常笨拙。简单地使用lastChild要容易得多。

addLoadEvent

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		} 
	} 
}

功能：

无论在页面加载时希望执行多少函数。最初需要多花几行时间来设置它，但一旦它到位，将函数附加到窗口。加载是一项容易的任务。这个函数被称为addLoadEvent，它是由西蒙·威利森(http://simon.incutio.com/)编写的。它接受一个参数：要在加载时执行的函数的名称。
这是addLoadEvent的作用：存储现有的窗口。作为一个称为olload的变量。如果它还没有附加一个函数，那么只需以通常的方式添加新函数。如果已经附加了一个函数，请在现有指令之后添加该新函数。

这有效地创建了一个要在页面加载时执行的函数队列。要向这个队列中添加函数，我只需要写：

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

Sharing hooks with JavaScript

功能：

在html文件中添加链接js文件的语句

示例：

<script type="text/javascript" src="scripts/showPic.js"></script>

Sharing hooks with CSS

功能：

在html文件中添加链接css文件的语句

示例：

<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />

document.write(不推荐使用)

功能：

将字符串插入到文档中

示例：

document.write("<p>This is inserted.</p>");

function insertParagraph(text) {
	var str = "<p>";
	str += text;
	str += "</p>";
	document.write(str);
}

You should avoid using <script> tags in your <body>. That rules out using document.write.

innerHTML（不推荐使用）

功能：

innerHTML可用于读取和写入元素中的HTML。将此标记插入到html的<body>中：

示例：

<div id="testdiv">
	<p>This is <em>my</em> content.</p>
</div>

var testdiv = document.getElementById("testdiv");
alert(testdiv.innerHTML);

结果：
在这里插入图片描述
显然，innerHTML并没有提供您可以从DOM方法和属性中获得的详细细节。使用标准化的DOM就像使用手术刀一样。使用innerHTML就像使用大锤一样。有时，你可能想要用一把大锤。如果您有一个HTML块，您想要逐字地插入到一个网页中，innerHTML可以这样做。它是一种读/写方法，这意味着您不仅可以使用它来获取元素中的HTML，而且还可以在元素中设置HTML。

示例：

<div id="testdiv">
</div>

var testdiv = document.getElementById("testdiv");
testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>";

结果：
在这里插入图片描述
当您希望以一种快速和简单的方式将HTML块插入到文档中时，innerHTML属性可能非常有用。不幸的是，innerHTML不会返回对您所插入的内容的任何引用。如果您想操作插入的内容，则需要DOM方法提供的精度。

InnerHTML优于document.write。使用innerHTML，您可以将JavaScript与标记分开。不需要将<script>标签插入到文档的<body>中。

在任何情况下，都可以使用标准化的DOM来代替innerHTML。它可能需要更多的代码来实现相同的结果，但正如您将看到的，它提供了更高的精度和能力。

createElement

功能：

创建新元素。

语法：

document.createElement(nodeName)

示例：

document.createElement("p");

结果：

<p></p>

appendChild

功能：

将新创建的节点插入到文档的节点树中，使其成为该文档中现有节点的子节点

语法：

parent.appendChild(child)

示例：

var testdiv = document.getElementById("testdiv");
var para = document.createElement("p");
testdiv.appendChild(para);

结果：

<div id="testdiv">
	<p></p>
</div>

createTextNode

功能：

创建一个文本节点

语法：

document.createTextNode(text)

示例：

document.createTextNode("Hello world");

var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
var txt = document.createTextNode("Hello world");
para.appendChild(txt);

结果：

在这里插入图片描述

parentNode

功能：

返回元素的父元素

语法：

Element.parentNode

nextSibling

功能：

返回元素的下一个兄弟姐妹元素

语法：

Element.nextSibling

insertBefore

功能：

在现有元素之前插入一个新元素。必须指定三件事：1.要插入的新元素；2.要插入它之前的目标元素；3.这两个元素的父元素。

语法：

parentElement.insertBefore(newElement,targetElement)

示例：

var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder,gallery);

insertAfter function

虽然DOM没有提供名为insertAfter的方法，但它提供了在另一个节点之后插入一个节点所需的所有工具。您可以使用现有的DOM方法和属性来创建一个名为insertAfter的函数：

function insertAfter(newElement,targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement,targetElement.nextSibling);
	} 
}