html dom模型一
DOM 节点
包含的节点内容：
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
DOM 处理中的常见错误是希望元素节点包含文本。
在本例中：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。
可通过节点的 innerHTML 属性来访问文本节点的值。
1：HTML DOM 常用方法方法
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
2：HTML 的属性：
innerHTML
<html>
<body> <p id="intro">Hello World!</p> <script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script> </body>
</html>
nodeName 属性：
nodeName 属性规定节点的名称
nodeValue 属性
nodeValue 属性规定节点的值。
nodeType 属性
nodeType 属性返回节点的类型
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
3：HTML DOM 访问：
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementById() 方法
<!DOCTYPE html>
<html>
<body> <p>Hello World!</p> <div id="main">
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div> <script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script> </body>
</html>
<!DOCTYPE html>
<html>
<body> <p>Hello World!</p> <div id="main">
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div> <script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script> </body>
</html>
4：修改html dom
修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
5:HTML DOM - 元素
添加、删除和替换 HTML 元素。
6:HTML DOM - 事件
html dom模型一的更多相关文章
- DOM模型有三种
<!-- DOM模型有三种: DOM level 1:将HTML文档封装成对象. DOM level 2:在level 1基础加入新功能,比如解析名称空间. //<html xmlns=& ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...
- JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解
这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...
- Fireworks Extension —— 开发篇（Dom模型）
如上一篇博文所叙述的,一个很偶然的机会,我得知可以使用Javascript开发Fireworks插件,又注意到了视觉小伙伴的需求,于是便上手开发Fireworks Extension了. 很幸运的,在 ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- 总结一下自己脑海里的JavaScript吧（一）--DOM模型
今天是2019年6月25日,闲来无事,写一篇文章来看看自己脑袋里装了多少JavaScript知识! 这儿就第一章: 说起JavaScript,它是什么?后端脚本语言?前端编程语言?还是在网站浏览器上运 ...
- 肆、js的DOM模型
一.网页中的dom模型框架 1.dom中的3中节点:元素节点.文本节点.属性节点 a.元素节点:html中的各种标签就是各个元素节点,元素节点可以包含其他元素,只有html根节点例外. b.文本节点: ...
- 浏览器内核之 HTML 解释器和 DOM 模型
微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决你的问题. 前言 此文章是我最近在看的[WebKit 技术内幕]一书的一些理解和做的笔记.而[WebKit 技术内幕]是基 ...
- JavaScript的事件、DOM模型、事件流模型以及内置对象详解（三）
JS中的事件 JS中的事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize ...
随机推荐
- tomcat容器启动的启动过程(三)
Catalina的start方法 /** * Start a new server instance. */ public void start() { if (server == null) { l ...
- solr与tomcat整合
一.准备工作:我使用的是tomcat7.0,solr-4.8.1 solr-4.8.1解压后是这样的. 二.开始配置了 1.首先要创建两个文件夹.home和server.我是创建在与solr-4.8. ...
- java反射机制（1）
反射,当时经常听他们说,自己也看过一些资料,也可能在设计模式中使用过,但是感觉对它没有一个较深入的了解,这次重新学习了一下,感觉还行吧! 一,先看一下反射的概念: 主要是指程序可以访问,检测和修改它本 ...
- C#第六天
字符串的处理练习: 课上练习1:接收用户输入的字符串,将其中的字符以与输入相反的顺序输出."abc"→"cba" 方法1: string str = " ...
- SQL函数学习（三）：convert()函数
格式:CONVERT(data_type,expression[,style])说明:此样式一般在时间类型(datetime,smalldatetime)与字符串类型(nchar,nvarchar,c ...
- CDOJ 1324 卿学姐与公主 分块
题目地址 分块模板 #include<cstdio> #include<algorithm> #include<math.h> using namespace st ...
- 利用NSURLSession完成的断点续传功能
首先是业务中的.h文件 #import <UIKit/UIKit.h> #import "DenglSingleton.h" @protocol DownLoadVCd ...
- tableView左滑按钮
- (nullable NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsFo ...
- python2.7学习记录之四
1.从raw_input()读取的内容永远以字符串的形式返回,把字符串和整数比较就不会得到期待的结果,必须先用int()把字符串转换为我们想要的整型 2.list增加元素 为 append() 3.d ...
- 第三十三节，sys解释器相关模块
首先要引入import sys模块 sys.argv 功能:获取向脚本文件传入的参数,返回的列表,列表里的第一个元素是脚本文件路径和名称,后面的元素是传入的向脚本传入的参数 使用方法:sys.argv ...