JavaScript 文档对象模型(DOM)
- 文档对象模型
- Core DOM
- XML DOM
- HTML DOM
- document 文档对象
- 根节点
- document.documentElement:返回存在于 XML 以及 HTML 文档中的文档根节点
- document.body:对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问
- 常见浏览器对象
- Window:JavaScript 层级中的顶层对象,表示浏览器窗口。
- Navigator:包含客户端浏览器的信息。
- Screen:包含客户端显示屏的信息。
- History:包含了浏览器窗口访问过的 URL。
- Location:包含了当前 URL 的信息。
- 常见DOM对象
- anchor:可以链接的所有锚点
- applet:所有的小程序
- area:所有使用<area>元素的图像映射
- forms:所有的<form>标签
- image:所有图像
- link:所有超链接
- HTML DOM 图
- HTML DOM 节点
- 整个文档是一个文档节点
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
- 注释属于注释节点
- HTML DOM 节点树
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
|
- HTML DOM 访问节点
- getElementById() 和 getElementsByTagName()
document.getElementById("ID");
document.getElementsByTagName("标签名称");
document.getElementById('ID').getElementsByTagName("标签名称");
|
- 元素节点的 parentNode、firstChild 以及 lastChild 属性
- parentNode:父节点
- firstChild :第一个子节点
- lastChild :最后一个子节点
- HTML DOM 节点信息
- nodeName(节点名称)
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
- nodeValue(节点值)
- 对于文本节点,nodeValue 属性包含文本
- 对于属性节点,nodeValue 属性包含属性值
- nodeValue 属性对于文档节点和元素节点是不可用的
- nodeType(节点类型)
- 元素:1
- 属性:2
- 文本:3
- 注释:8
- 文档:9
JavaScript 文档对象模型(DOM)的更多相关文章
- JavaScript文档对象模型(DOM)——DOM核心操作
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口. W3C已经定义了一系列DOM接口,通过这些DOM接口可 ...
- (84)Wangdao.com第十八天_JavaScript 文档对象模型 DOM
文档对象模型 DOM DOM 是 JavaScript 操作网页的接口, 全称为“文档对象模型”(Document Object Model). 作用是将网页转为一个 JavaScript 对象,从而 ...
- JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】
全部章节 >>>> 本章目录 4.1 文档对象模型简介及属性 4.1.1 文档对象模型概述 4.1.3 实践练习 4.2 document 对象查找 HTML 元素 4.2 ...
- 文档对象模型 DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
- 文档对象模型-DOM(一)
首先看一下DOM树结构: 每个节点都是一个对象,拥有方法和属性. 脚本可以访问以及更新DOM树(不是源代码). 针对DOM树的修改都会反映到浏览器. 访问并更新DOM树需要两个步骤: 一.定位到与 ...
- 文档对象模型-DOM(二)
从NodeList中选择元素 方法一:item()方法,用于返回其中的单一节点,需要在方法的参数中指定所需元素的索引编号. 当其中没有任何元素时,执行代码是对资源的浪费.因此程序员会在执行代码之前,先 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- 【温故而知新-Javascript】理解 DOM
DOM(Document Object Model,文档对象模型)允许我们用 JavaScript 来探查和操作 HTML 文档里的内容.它对于创建丰富性内容而言是必不可少的一组功能. 1. 理解文档 ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
随机推荐
- K8s 入门
中文文档:https://www.kubernetes.org.cn/kubernetes%E8%AE%BE%E8%AE%A1%E6%9E%B6%E6%9E%84 小结大白话 Portainer 挺好 ...
- oracle启动服务和监听
1.故障问题:tomcat显示启动oracle数据库失败,数据库服务启动正常 操作1:重启tomcat查看错误信息 2:重启数据库服务 命令: (1) 启动Oracle服务 C:\Users\Admi ...
- 构建一个 预装 pm2 的 node 项目 docker 底包
Dockerfile: 创建 dockerfile 文件, 命名为 dockerfile-yourProject-node.8.12.0-pm2 # MAGE: yourGroup/yourProje ...
- Web前端-Vue.js必备框架(四)
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- [Swift]LeetCode208. 实现 Trie (前缀树) | Implement Trie (Prefix Tree)
Implement a trie with insert, search, and startsWith methods. Example: Trie trie = new Trie(); trie. ...
- [Swift]LeetCode784. 字母大小写全排列 | Letter Case Permutation
Given a string S, we can transform every letter individually to be lowercase or uppercase to create ...
- [Swift]LeetCode1015. 可被 K 整除的最小整数 | Smallest Integer Divisible by K
Given a positive integer K, you need find the smallest positive integer N such that N is divisible b ...
- ThinkInJava之内部类
一:内部类概述 将一个类的定义放在另一个类的内部,这就是内部类.内部类是Java一种非常有用的特征,因为他允许你把一些逻辑相关的数据组织在一起,并控制它的可见性. 二:内部类的创建 我们都知道类的创建 ...
- Python内置函数(25)——getattr
英文文档: getattr(object, name[, default]) Return the value of the named attribute of object. name must ...
- Python爬虫入门教程 17-100 CSD*博客抓取数据
写在前面 写了一段时间的博客了,忽然间忘记了,其实CSD*博客频道的博客也是可以抓取的,所以我干了..... 其实这事情挺简单的,打开CSDN博客首页,他不是有个最新文章么,这个里面都是最新发布的文章 ...