`

JavaScript DOM学习笔记3——DOM属性操作

 
阅读更多

Node接口本身有一个attributes属性，并且所有类型的节点都继承了该属性。但是，事实上只有Element类型的节点才能有属性。Element节点的attibutes属性类型为NamedNodeList。NamedNodeMap可以通过数字和名字索引节点。

NamedNodeMap具有以下几个常用的方法：

1.getNamedItem(name):根据name获取属性节点。

2.setNamedItem(node):将节点添加进NamedNodeMap中，并且按照name索引。

3.removeNamedItem(name):删除name对应的节点

4.item(pos):类似于NodeList中的item()方法，通过节点的索引位置查找节点。

上述方法返回的都是一个Attr类型的节点，也就是Node.ATTRIBUTE_NODE。NamedNodeMap具有一个length属性表示其中包含几个元素。

 

但是考虑到上述方法过于累赘，DOM还定义了三个方法来操作属性：

getAttribute(name):通过name获取属性值

setAttribute(name,newValue):设置属性值

removeAttribute(name):删除属性

 

根据上面说的，我写了点测试代码：

 

<html>
	<head>
		<title></title>
		<script type="text/javascript">
			var oHtml = document.documentElement;
			var oBody = oHtml.lastChild;
			var oP = oBody.lastChild;
			var oId = oP.getAttribute("id");
			alert(oId);
		</script>
	</head>
	<body>
		<p style="color:red" id="pId"></p>
	</body>
</html>

 

 

事实上，不管IE8、Chrome还是Firefox都没办法取到<p>的id属性值。这一点很是困惑。。。

 

 

 

参考书目：

《JavaScript高级编程》Nicolas C. Zakas著， 曹力 张欣 等译。

 

分享到：
| JavaScript DOM学习笔记2——DOM的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript HTML DOM学习笔记.emmx

    从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走

    狂神Java学习笔记————前端入门——html、css、JavaScript学习代码

    【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...

    比较详细的javascript DOM 学习笔记第1 2页.docx

    ### JavaScript DOM 学习笔记知识点总结 #### 一、DOM基础概述 DOM（Document Object Model）文档对象模型是一种处理可扩展标记语言的标准编程接口。它提供了结构化文档（如HTML和XML）的标准方法来访问、修改文档...

    web学习笔记 —— javascript基础

    这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界，理解其基本概念和常用语法。 JavaScript语法基础： 1. 变量：在JavaScript中，变量用于存储数据。声明变量使用`var`关键字，例如`var myVar = ...

    前端学习（六）——javascript学习笔记（四）HTML DOM.xmind

    前端学习（六）——javascript学习笔记（四）HTML DOM.xmind

    韩顺平javascript 韩顺平js-DOM学习笔记

    韩顺平js-DOM学习笔记

    javaScript DOM编程艺术2版学习笔记

    在这个学习笔记中，涵盖了从基础到高级的JavaScript和DOM操作技巧，一共涉及1~9章的内容。以下是对这些章节知识点的详细阐述： **第1章：JavaScript简介** 本章介绍了JavaScript的基本概念，包括它是一种解释型、弱...

    JS基本功DOM学习笔记

    在"Javascript_DOM学习笔记+代码"中，你可能会发现具体的示例代码和练习，这些可以帮助你更好地理解和实践上述概念。通过深入学习和实践，你将能够熟练地操纵网页内容，创建动态交互的Web应用。

    传播智客扬中科老师讲的DOM 学习笔记

    根据给定的文件信息，我们可以总结出以下关于DOM（Document Object Model）操作的关键知识点： ### DOM简介 DOM是一种处理HTML和XML文档的标准接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM...

    javascript入门学习笔记

    这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据，数据类型分为基本类型（如字符串...

    JavaScript-学习笔记.pdf

    以上是JavaScript学习笔记中提到的一些核心知识点，通过对这些知识点的理解和熟练应用，可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中，结合具体的项目需求，这些知识会得到更深入的拓展和应用...

    js DOM学习笔记11

    JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...

    JavaScript DOM编程艺术（中文第二版）学习笔记

    总的来说，JavaScript DOM编程艺术这本书涵盖了JavaScript基础、DOM操作以及实际应用，是学习网页动态交互和JavaScript编程的重要资源。通过学习，开发者能够熟练地创建交互式、动态的网页内容。

    JavaScript dom编程艺术：个人笔记.pdf

    1. JavaScript基础知识：学习DOM编程之前，首先要掌握JavaScript的基础语法，包括变量声明、数据类型、控制结构（如if语句和循环）、函数定义与调用等。理解这些基础知识对于后面深入学习DOM操作至关重要。 2. DOM...

    比较详细的javascript DOM 学习笔记第1/2页

    本篇学习笔记主要探讨了DOM的基础知识，包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**：作为整个文档的顶级节点，它包含了文档的全部内容。 - **DocumentType**：表示文档...

    JavaScript_DOM编程—新版学习笔记.txt

    8. **属性操作方法**： - **`getAttribute()`**: 获取指定节点的属性值。 - **`setAttribute()`**: 设置或更改指定节点的属性值。 - **`removeAttribute()`**: 删除指定节点的属性。 - **示例**： ```...

    JavaScript基础学习笔记

    JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...

    韩顺平javascript笔记（最全整理 dom编程 oop 基础语法）

    韩顺平老师的JavaScript笔记全面涵盖了基础语法、面向对象编程以及DOM编程，这些都是学习JavaScript时至关重要的知识点。 首先，基础语法是JavaScript学习的基石。包括变量声明（var、let、const）、数据类型（如...

    DOM学习笔记

    **DOM学习笔记** DOM，全称为Document Object Model，是HTML和XML文档的一种标准表示方式，它将网页内容结构化为一个可编程的节点树。在DOM中，每个部分（如元素、属性、文本等）都有对应的对象，允许我们通过...

Magicbox
Global site tag (gtag.js) - Google Analytics