htmlDOM操作1
DOM 是 Document Object Model（文档对象模型）的缩写。
- HTML 的标准对象模型
- HTML 的标准编程接口
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
HTML
DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
通过
HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>
从上面的 HTML 中：
- <html> 节点没有父节点；它是根节点
- <head> 和 <body> 的父节点是 <html> 节点
- 文本节点 "Hello world!" 的父节点是 <p> 节点
并且：
- <html> 节点拥有两个子节点：<head> 和 <body>
- <head> 节点拥有一个子节点：<title> 节点
- <title> 节点也拥有一个子节点：文本节点 "DOM 教程"
- <h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点
并且：
- <head> 元素是 <html> 元素的首个子节点
- <body> 元素是 <html> 元素的最后一个子节点
- <h1> 元素是 <body> 元素的首个子节点
- <p> 元素是 <body> 元素的最后一个子节点
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。
HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
一些 DOM 对象方法
这里提供一些您将在本教程中学到的常用方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。
所有
HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
nodeName
始终包含 HTML 元素的大写字母标签名。
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
htmlDOM操作1的更多相关文章
- htmldom操作添加标签顺序
<!DOCTYPE html> <html> <body> <div id="div1"> </div> <scr ...
- JavaScript基本知识点整理（超实用）
絮叨絮叨 今天给大家分享一下这两天自己整理的JavaScript部分的笔记,下面都是我觉得比较常用的,希望能帮助到大家! 1. 导入JS的三种方式 ①在HTML ...
- 11-28 网页基础--JavaScript(DOM)
网页基础 第二部分--HTMLDOM操作 一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 ...
- 锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input" ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jQuery -- DOM节点的操作
DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...
- Jquery一般操作归纳
一.DOM操作分类 1.DOM Core getElement(s)获得元素 2.HTML-DOM document.对象/操作标签的属性 3.CSS-DOM ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
随机推荐
- android开发之broadcast学习笔记
android中的广播用的太多了,今天稍微总结一下. 按注册方式分为两种: 1.静态注册广播: 静态注册广播就是在androidManifest.xml文件中注册广播,假设我们要实现这样一个效果,在一 ...
- JSP自定义标签必知必会
自定义标签技术自sun公司发布以来,便一向很受欢迎!下面我就来谈一谈如何实现自定义标签,以及如何使用自定义标签. 如何实现自定义标签 首先我们应该知道原理,不管是标签还是JSP,本身实际上都会被JSP ...
- 谈谈Ext JS组件之引子
Ext JS组件,对于Ext JS开发人员来说,应当不会陌生,毕竟做开发,都必须与它打交道.对于这样一个大家都熟悉的东西,为什么要用一个专题的形式来写呢?是否有这方面的需要?还不如去写点使用技巧? 确 ...
- Gitflow工作流程
在工作场合实施Git的时候,有很多种工作流程可供选择,此时反而会让你手足无措.本文罗列了企业团队最常用的一些Git工作流程,包括Centralized Workflow.Feature Branch ...
- UNIX环境高级编程——时间和日期
由UNIX内核提供的基本时间服务是计算自国际标准时间公元1970年1月1日00:00:00以来经过的秒数.这种秒数是以数据类型time_t表示. 1. time函数返回当前时间和日期: tim ...
- OJ题：输入一个多位的数字，求各数位相加。
题目内容: 输入一个多位的数字,1求各数位相加. 例如输入12345,则计算1+2+3+4+5=15 输入格式: 一个整数 输出格式: 一个整数 输入样例: 1234567890 输出样例: 45 时 ...
- NDK工具开发Jni,Android studio jni开发
NDK工具开发JNI 对于JNI的作用,我这边就不详细说明了,百度google 有很多这样的介绍,这边着重详解AS使用NDK工具开发,调C的流程. 1,创建工程 2,创建native方法 //该类的路 ...
- 【一天一道LeetCode】#69. Sqrt(x)
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Impleme ...
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
- 类模板语法知识体系梳理（包含大量常犯错误demo，尤其滥用友元函数的错误）
demo 1 #include <iostream> #include <cstdio> using namespace std; //template <typenam ...