HTML DOM学习之一
1.HTML DOM定义了访问和操作HTML文档的标准方法:DOM以树型结构表达了HTML文档;
2.DOM是W3C的标准,定义了访问HTML和XML文档的标准:
DOM(文档对象模型)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容,结构和样式;
3.DOM标准分为3个不同的部分:
**核心 DOM:针对任何结构化文档的标准模型;
**XML DOM:针对XML文档的标准模型;
**HTML DOM:针对HTML文档标准模型;
4.XML DOM:定义了所有XML元素的对象和属性,以及访问它们的方法;
5.HTML DOM:关于如何获取,修改,添加或删除HTML元素的标准;
6.HTML DOM节点:在HTML DOM中,所有事物都是节点。DOM是被视为节点树的HTML
**整个文档是一个文档节点
**每个HTML元素是元素节点
**HTML元素内的文本是文本节点
**每个HTML属性是属性节点
**注释是注释节点
7.节点父,子和同胞:节点树的节点彼此拥有层级关系;
**父,子和同胞等术语用于描述这些关系;
**每一个节点都有父节点,除了根它没有(父节点);
**一个节点可拥有任意数量的子;
**同胞是拥有相同父节点的节点;
8.例如:
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
**<html>节点没有父节点;它是根节点
**<head>和<body>的父节点是<html>节点
**文本节点"Hello world!"的父节点是<p>节点
9.HTML DOM方法:方法是我们可以在节点(HTML元素)上执行的动作:
(1)编程接口:
**可通过JavaScript(以及其他编程语言)对HTML DOM进行访问;
**所有HTML元素被定义为对象,而编程接口则是对象方法和对象属性;
**方法是您能够执行的动作(比如添加或修改元素)
**属性是能够获取或设置的值(比如节点的名称或内容)
(2)getElementById()方法:返回带有指定ID的元素
var element=document.getElementById("intro");
10.HTML对象-方法:
**getElementById(id)-获取带有指定id的节点(元素)
**getElementByTagName()-返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)
**getElementByClassName()-返回包含带有类名的所有元素的节点列表
**appendChild(node)-插入新的子节点
**removeChild(node)-删除子节点
**replaceChild()-替换子节点
**insertBefore()-在指定的子节点前面插入新的子节点
**createAttribute()-创建属性节点
**createElement()-创建元素节点
**createTextNode()-创建文本节点
**getAttribute()-返回指定的属性值
**setAttribute()-把指定属性设置或修改为指定的值
11.HTML DOM对象的属性:
**innerHTML-节点(元素)的文本值
**parentNode-节点(元素)的父节点
**childNodes-节点(元素)的子节点
**attributes-节点(元素)的属性节点
HTML DOM学习之一的更多相关文章
- 前端基础-BOM和DOM学习
JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...
- HTML DOM 学习
HTML DOM 学习 By: Mirror王宇阳 E-mail:2821319009@qq.com 博客主页:https://www.cnblogs.com/wangyuyang1016/ DOM ...
- JavaScript DOM学习总结(一)
DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法. W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
- Js dom 学习
节点类型 文档节点: 一棵DOM树的顶端是文档节点,它呈现为整个页面(相当于document对象),当需要访问任何元素.属性或文本节点时,都需要通过文档节点来进行导航.(document.) 元素节点 ...
- Dom学习笔记
今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...
- JavaScript DOM学习总结(二)
获取和设置属性 DOM实在是个好东西,掌握了它我们不仅可以在JavaScript中使用,其它程序语言我们同样可以使用. 接下来就一起使用DOM来干些实事吧! 1.getAttribute getAtt ...
- JS DOM学习笔记
1.window对象代表当前浏览器窗口 2.使用window对象的属性.方法的时候可以省略window.例如:window.alert("hello")一般写成alert(&quo ...
- HTML DOM学习之三
1.创建新的HTML元素:appendChild(); 如需向HTML DOM添加元素,首先必须创建该元素,然后把它追加到已有的元素上: <div id="div1"> ...
- HTML DOM学习之二
1.HTML DOM属性: **innerHTML属性-获取元素内容的最简单方法是使用innerHTML属性,innerHTML属性对于获取或替换HTML元素的内容很有用 <html> & ...
随机推荐
- js注册读秒进度条
转载自://http://blog.csdn.net/wugouzi/article/details/12621385 <head> <meta http-equiv="C ...
- pdf.js使用教程
pdf.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!) 据说IE9以上 ...
- mybatis参数错误 Parameter '×××' not found. Available parameters are [0, 1, param1, param2]
报错的代码 @Update("update staff_info set ApplyState = #{applyState} where Id = #{userId}") int ...
- sqlserver 动态行转列
DECLARE @SQL VARCHAR(8000)SET @SQL = 'select overcode 'SELECT @SQL = @SQL + ' , max(case header when ...
- 使用Ajax上传图片到服务器(不刷新页面)
有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这 ...
- WaxPatch中demo注意问题
问题一 https://github.com/mmin18/WaxPatch网址中提供的demo是可以运行,但是存在一个问题,如果把patch.zip换成自己的并且上传到自己的服务器(github), ...
- iOS 动态计算文本内容的高度
关于ios 下动态计算文本内容的高度,经过查阅和网上搜素,现在看到的有以下几种方法: 1. // 获取字符串的大小 ios6 - (CGSize)getStringRect_:(NSString* ...
- c语言强制类型转换
一.强制类型转换 printf("3/2+100.5=%f",3/2+100.5);//100.5错误表达 printf (" (float)3/(float)2 ...
- MVC - 19.Log4net
下载地址:http://pan.baidu.com/s/1gdxQegN 对于网站来讲,我们不能将异常信息显示给用户, Log4Net用来记录日志,可以将程序运行过程中的信息输出到文件,数据库中等 ...
- MVC - 10.CodeFrist
微软示例 1.(对新数据库使用 Code First):http://msdn.microsoft.com/zh-cn/data/jj193542 2.(连接和模型):http://msdn.micr ...