js入门——Dom基础
DOM=DocumentObject Model，文档对象模型。
Dom有三个不同的部分。
1、核心DOM 也是最基础的文档结构的标准模型
2、XMLDOM 针对XML文档的标准模型
3、HTML DOM 针对HTML文档的标准模型
对于一个新生程序猿来说。HTML是什么，事实上并不重要。可是都知道。html文件，能够用浏览器打开。
HTML和XML。基本同样。仅仅只是是。HTML中节点 标记，是预先定义好的。
而XML中的节点。由文档的作者定义。所以XML是可扩展的。
HTML： 超文本标记语言。主要功能是能被浏览器解析 显示出来。HTML能够看作是一种特殊的标记语言。
XML：可扩展标记语言。
而DOM作为以上的标准。当然会对其上面进行规划：
依据DOM，文档每一个成分都是一个节点。
对于上面的文档。
事实上就是一颗树。
通过一个样例来了解一下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script src="base.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<h1>标题H1</h1>
<p>p标签</p>
<ul>
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
</ul>
<div id='box' name='boxs'>測试div</div>
</body>
</html>
什么是节点？
文档中的全部标记，都称之为节点。
DOM节点树中的节点分为：
元素节点、文本节点、属性节点。
元素节点：标记名称 如 html body div等
文本节点：标记的内容 如 "測试div" "p标签" 等等
属性节点：用于修饰 标记名称的。也算是 标记的属性。 如 ：id='boxs'
对元素元素的查询：
元素的查询，有好多种方式。
依据标记名称(getElementsByTagName)、id名(getElementById)、name名(getElementsByName)。
都能够进行查找
innerHTML：获取元素节点中的文本节点
元素属性节点的改动。查到元素之后，也能够进行 属性的改动 attribute
查找元素的时候。假设查到的元素 不止一个，那么返回的为一个节点数组。因此在使用的时候一定不能缺少数组标号。通过childNode属性来获取全部子节点
对与节点来说。也是一种树形结构。当查询到一个元素节点后，这个元素节点中 也包含非常多小节点。
如上所看到的的节点，由 属性节点 和 文本节点构成。使用childNodes.length 获取元素节点中的全部子节点
使用的时候。与数组类似 childNodes[i] 对第i个子节点进行操作
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemM0NzQyMzU5MTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
对子节点的操作
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemM0NzQyMzU5MTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
DOM基础非常多，记是肯定记不住的。浏览一遍。了解一下，在下次使用的时候，知道有那么一回事。知道在哪里查资料即可了。
当然，也能够依据IDE的智能提示来做。
js入门——Dom基础的更多相关文章
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- js笔记-DOM基础
DoM 浏览器支持: IE: 10% FF: 99% Chrome: 60% childNotes不兼容 在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中childNo ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- web前端开发分享-css,js入门篇（转）
转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...
- DOM基础（一）
在我们刚刚学JavaScript的时候,就应该听说过,JavaScript是由三部分组成的.分别是ECMAScript,DOM和BOM组成的.ECMAScript是JavaScript的核心,它描述了 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- web前端开发分享-css,js入门篇
学习没有捷径,但学习是有技巧与方法. 一,css入门篇: 推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...
随机推荐
- 启动和停止MySQL服务
1. 启动MySQL服务 启动MySQL服务的命令为: /etc/init.d/mysqld start 命令执行后如图7-5所示,表示启动MySQL服务成功. (点击查看大图)图7-5 启动 ...
- 「OC」内存管理
一.基本原理 (一)为什么要进行内存管理. 由于移动设备的内存极其有限,所以每个APP所占的内存也是有限制的,当app所占用的内存较多时,系统就会发出内存警告,这时需要回收一些不需要再继续使用的内存空 ...
- java虚拟机内存溢出各种场景总结
java堆溢出 java堆用于存储对象实例,只要不断地创建对象,并且保证gc roots到对象之间有可达路径来避免垃圾回收机制来清楚这些对象,那么在 对象到达最大堆的容量限制后就会产生内存溢出溢出. ...
- 添加站点图标: 为SAE上的WordPress站点添加自己的Favicon
由于插件 Jetpack的"添加站点图标"功能有问题, 无法从本地上传ico文件到SAE的Storage. 因此需要手动添加站点图标. Step 1: 制作或下载自己的ico文件, ...
- javascript 检测密码强度 美化版
模仿美团的美化 <!DOCTYPE> <head runat="server"> <title></title> <link ...
- Code 16K 码
Code 16K 码是一种多层.连续型.可变长度的条码符号,可以表示全ASCII字符集的128个字符及扩展ASCII字符.它采用UPC及Code128字符.一个16层的Code 16K符号,可以表示7 ...
- Qt SQL Programming 部分翻译
简介: Qt SQL 是 Qt 的重要模块之一,为了方便,Qt 对 SQL 进行了一系列的封装,并将 SQL API 分为如下三层: (1)驱动层 (2)SQL API ...
- springMVC + mybatis 搜索 分页等
mybatis-3.0.5spring-core-3.2.0.RELEASE等MyBatis3+Spring3当前Spring版本(3.0.5)中未提供对MyBatis3的支持使用第三方jar包进行整 ...
- Spring Cache抽象详解
缓存简介 缓存,我的理解是:让数据更接近于使用者:工作机制是:先从缓存中读取数据,如果没有再从慢速设备上读取实际数据(数据也会存入缓存):缓存什么:那些经常读取且不经常修改的数据/那些昂贵(CPU/I ...
- java如何把char型数据转换成int型数据(转)
一字符串,String=“2324234535”:把第i个数取出来时是char型的:char temp=String.charAt(i)如何把char型转换成int型?我需要求个尾数之和,如:123的 ...