HTML DOM学习
The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.
HTML DOM定义了所有HTML元素的对象和内容以及可以操作他们的方法(接口)
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
HTML DOM是一种关于获得,改变,增加,删除HTML元素的标准
HTML中的所有东西都是节点node
The entire document is a document node 整个文档是一个document node
Every HTML element is an element node 每个HTML元素是一个element node
The text in the HTML elements are text nodes 每个文本是一个text node
Every HTML attribute is an attribute node 每个HTML属性是一个attribute node
Comments are comment nodes 每个注释是comment nodes
DOM树形结构 根 父 子 兄弟 概念
DOM的一些properties
x.innerHTML - the text value of x x节点的文本值
x.nodeName - the name of x x节点的名称
x.nodeValue - the value of x x节点的值
x.parentNode - the parent node of x x节点的父节点
x.childNodes - the child nodes of x x节点的子节点
x.attributes - the attributes nodes of x x节点的属性
DOM的一些methods
x.getElementById(id) - get the element with a specified id 获得特定id的元素
x.getElementsByTagName(name) - get all elements with a specified tag name 获得特定name的所有元素
x.appendChild(node) - insert a child node to x 为x节点增加一个节点
x.removeChild(node) - remove a child node from x 从x节点移除一个节点
例子:
<p id="intro">Hello World!</p>
txt=document.getElementById("intro").innerHTML;
txt为Hello World!
同样的
txt=document.getElementById("intro").childNodes[0].nodeValue;
txt也是Hello World!
再者
x=document.getElementsByTagName("p");
x[0].innerHTML为Hello World!
Node Properties 节点的重要内容
nodeName 只读
nodeValue 对element节点为undefined
nodeType 只读 Element 1 Attribute 2 Text 3 Comment 8 Document 9
关于DOM的操作可以配合在js中使用,配合各种event或其他等
依旧来自:http://www.w3schools.com HTML DOM教程的整理
分享到:
相关推荐
前端学习(六)——javascript学习笔记(四)HTML DOM.xmind
问:如何使用HTML DOM getElementsByTagName() 方法获取文档中所有的表: 答: Var tables = document.getElementsByTagName("table"); alert("This document contains contains"+tables.length+"tables");
javascript DOM Html 对象对象参考手册
目录如下: 1. DOM可以做什么?...5. 访问DOM节点3——通过节点关系 6. DOM节点信息 7. DOM信息nodeType的应用 8. 修改DOM——innerHTML 9. 删除DOM节点——removeChild 10. 添加DOM节点 11. DOM简介总结
我深感性能优化实在是前端知识树中特别的一环——当你需要学习前端框架时,文档和源码几乎可以告诉你所有问题的答案,当你需要学习 Git 时,你也可以找到放之四海皆准的实践方案。但性能优化却不一样,它好像只能是...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM——文档元素的操作(二)。源码txt格式。
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十三:HTML DOM——文档元素的操作(一)。源码txt格式。
document.createElement(‘tagName’) 创建有tagName 指定的HTML元素,因为这些元素原先不存在,是根据我们的需求动态生成的,所以,我们也称为动态创建元素节点。 添加节点 在子节点后追加元素:node.appendChild...
文档对象模型——Document Object Model DOM可以视为一种API的应用 将文件视为一个文件对象,通过程序语言调用DOM对象,来对该文件的某些特定数据做访问操作,并且利用程序将获取的对象数据做更进一步的应用。 HTML...
本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求,详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理,由浅入深、循序渐进地引导读者快速...
射击类游戏,操作方法:方向键左右移动,空格子弹,"B"释放power(power槽满时) 游戏中玩家在打到一定分数后会升级获得能力提升,同时场上也会出现相应级别的敌人; 游戏没有设置成功条件,但是设置了死亡条件,被...
8 wrangling the page: Slicing and Dicing HTML with the DOM ————343 9 bringing data to life: Objects as Frankendata ————393 10 creating custom objects: Having It Your Way with Custom Objects ...
Collie 可以运行在 PC 和手机上,使用 HTML5 Canvas 和 DOM。Collie 能够多线程稳定的处理多个对象,支持很多实用的功能,包括精灵动画和用户事件。稳定支持 iOS 和 Android,并为每个平台的渲染提供优化的方法。
5 、如何在 Web 页面上创建动态表格? 6 、如何为 Win32 服务程序提供事件源消息文件? 7 、如何创建单实例(静态) COM 组件? 8 、如何在 Delphi 6 及以上版本中使用可变常量(类型常量)? 9 、几个有用的 ANSI C...
JavaScript语言参考 JavaScript教程 Scripting 运行时的参考 filesystemobject对象教程
JAVASCRIPT游戏 SEA-WOLF 2.0版本 操作方法:方向键移动,空格射击,B键释放POWER;...这个版本放出来主要是学习围观代码用,游戏文案、UI甚少; 有兴趣者可自行用程序中API设计关卡中的敌人、BOSS等;
sea wolf V1.1版本 较之前版本增加了很多新元素 能力分支选择; BOSS模式; 胜利条件; 多POWER储蓄; UI调整; 等等。
010302_XML解析 —— DOM 010303_XML解析 —— SAX 010304_XML解析 —— JDOM 010305_XML解析 —— DOM4J 010306_使用JavaScript操作DOM 010401_Tomcat服务器的安装及配置 020501_注释及Scriptlet 020502_page指令 ...
张孝祥老师生前鸿篇巨著。包括html,CSS,DOM编程,javaScrip语法,脚本编程的相关技术,正则表达式。
12.4 添加事件——为人造select赋予生命 12.5 让表单绽放光彩 12.6 行为修正 12.6.1 z-index来救急 12.6.2 键盘控制及其他细节 12.6.3 select太大了吗 12.7 最后的细节 12.8 ...