深入理解JavaScript：DOM操作与属性探索

需积分: 0 66 浏览量更新于2024-07-26 收藏 257KB PDF 举报

"Javascript技术笔记2" 在"Javascript技术笔记2"中，主要涉及了JavaScript在操作DOM（文档对象模型）以及元素属性方面的一些关键知识点。以下是对这些内容的详细解释： 1. 查看document属性和方法 `for(i in document){ document.write(i, "====>", document[i], "<br>"); }` 这段代码用于遍历`document`对象的所有属性和方法，并通过`document.write()`将它们输出到页面上。这有助于开发者了解`document`对象所包含的全部成员。 2. 获取HTML元素的HTML值 - `document.documentElement.outerHTML`: 返回整个HTML文档的字符串表示，不包括`<html>`标签本身。 - `obj = document.getElementsByTagName("html")[0]; alert(obj.outerHTML);` 这里通过`getElementsByTagName()`选取第一个`<html>`元素，并显示其`outerHTML`属性，展示整个DOM树的HTML源码。 3. 获取DOM元素对象 - `document.getElementById()`: 根据ID查找唯一的DOM元素。 - `document.getElementsByTagName()`: 根据标签名获取元素集合。 - `document.getElementsByName()`: 根据名称获取元素集合。 - `document.getElementsByClassName()`: 根据类名获取元素集合。 - `document.querySelector()`: 返回匹配指定CSS选择器的第一个元素。 - `document.querySelectorAll()`: 返回匹配指定CSS选择器的所有元素，返回的是一个NodeList对象。 4. DOM对象的子元素相关属性和方法 - `obj.hasChildNodes()`: 判断DOM对象是否含有子元素，返回布尔值。 - `obj.childNodes`: 获取元素的所有子节点，包括文本节点、注释节点等，返回的是NodeList。 - `obj.firstChild`: 获取元素的第一个子节点。 - `obj.lastChild`: 获取元素的最后一个子节点。 - `obj.parentElement`: 获取元素的父元素。 - `obj.children`: 获取元素的所有子元素，不包括文本节点等，返回的是HTMLCollection。 - `obj.parentNode`: 获取元素的父节点。 5. 设置DOM属性 - `obj.setAttribute("name", "divname")`: 为DOM元素设置属性，这里为元素添加或修改名为"name"的属性，值为"divname"。这些知识点是JavaScript进行DOM操作的基础，对于网页动态效果的实现、交互设计以及数据绑定等至关重要。理解和熟练运用这些方法，可以帮助开发者更有效地操控页面元素，实现丰富的网页功能。在实际开发中，应特别注意避免使用`document.write()`造成死循环的情况，而选择合适的输出方法，如`console.log()`或`alert()`来调试代码。

「已注销」

粉丝: 11
资源: 23

深入理解JavaScript：DOM操作与属性探索

Javascript入门笔记和一些代码

javascript入门学习笔记

韩顺平轻松搞定网页设计(html+css+javascript)笔记下载

《JavaScript秘密花园》— 笔记

javascript笔记

渡一前端html、css、js笔记及学习规划.zip

b站 飞哥 大前端进阶 笔记

基于jsp共享笔记系统的设计与开发

python项目实战之在线笔记管理系统

最新资源

b站飞哥大前端进阶笔记