Document Object Model 文档对象模型

===DOM====

一组API.

作用:

1.修改标签属性

2.增加删除html文本中的标签

操作:

1.查找

方式1:使用id或者标签名,查找节点

document.getElementById("id值");

document.getElementsByTagName("标签名");

方式2:遍历

parentNode:父节点

previousSibling:前一个兄弟节点

nextSibling:后一个兄弟节点

childNodes:孩子节点,返回数组

firstChild:第一个孩子节点

lastChild:最后一个孩子节点

--样式的操作:

a.通过设置className属性

obj.className="";

b.通过修改style属性

obj.style.width=""

css属性名如果有"-",则去掉"-",之后的一个字母大写

如: obj.style.backgroundColor="";

2.创建

var newNode = document.createElement(tagName);

var txt = document.createTextNode("文本内容");

3.添加

appendChild(newNode):添加新节点到末尾

insertBefore(newNode,refNode):添加newNode到refNode节点之前

replaceChild(newNode,refNode):将refNode节点替换成newNode

4.删除

removeChild(node):删除节点node

--动态表格---

--table对象---

属性:

rows属性:返回表格中的所有行的一个数组

该数组包括<thead>,<tfoot>,<tbody>中定义的所有行

tBodies属性:放回表格中所有tbody的一个数组

tFoot属性:返回表格中tFoot对象

tHead属性:返回表格中tHead对象

方法:

insertRow(index):(index从0开始)在表格中的指定位置插入一个新行,返回一个TableRow对象(表示新插入的行,即tr)

deleteRow(index):从表格中删除指定位置的行.

--TableRow对象--

属性:

cells:返回行中的所有单元格的一个数组

rowIndex:返回该行在表中的位置

方法:

insertCell(index):(index从0开始)在指定位置插入一个新的单元格,返回一个TableCell对象(表示新插入的单元格,即td)

deleteCell(index):删除指定位置的单元格.

---select对象---

<select>

<option value="">xxx</option>

</select>

属性:

selectedIndex:用户选中的下标的序号

options:是一个数组,表示所有的选项,每一个元素都是一个option对象

length:表示选项的个数

s.options.length == s.length :true

--option对象

value:option的value属性的值

text:option标记之间的文本

selected:true|false 表示该选项是否被选中

创建新的option对象:

var op = new Option(text,value)

--form对象

属性:

action:form标签中的action属性

method:get|post form标签中的method属性

elements:返回form表单中所有的节点,是一个数组

方法:

submit():提交,会绕过表单验证(onsubmit)

reset():重置表单

Document Object Model 文档对象模型,布布扣,bubuko.com

时间: 2024-10-21 11:55:00

Document Object Model 文档对象模型的相关文章

JS--dom对象:document object model文档对象模型

dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提供的对象,使用这些对象的属性和方法,对标记性文档进行操作 想要对标记性文档进行操作,首先需要对标记性文档里面的所有内容封装成对象 对HTML 标签 属性 文本内容都封装为对象 要想对标记性文档进行操作,解析标记性文档 --使用DOM解析HTML过程 根据HTML的层级结构,在内存中分配一个树形结构,

DOM(document object model)文档对象模型

DOM是文档对象,它是把整个页面封装成一个对象.页面是由很多节点组成的,节点又包括元素,属性,文本.获取页面元素的方式有三种. 第一: getElementById,通过Id值来获取整个标签的所有属性. 第二:  getElementsByTagName,通过标签名值来获取整个标签的所有属性,它获得元素会以数组方式存在,你要取用时,要用数组的方法取. 第三: getElementsByClassName,通过类名来获取整个标签的所有属性,它获得元素会以数组方式存在,你要取用时,要用数组的方法取,

js基础,DOM 文档对象模型

DOM 文档对象模型 DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系. 一.节点 节点(node) 一词来自于网络理论,这代表着网络中一个个的连接点,网络是由节点构成的. 对于html文档也是一样,文档是由节点构成的集合. 1.元素节点 元素节点如 <body> <p> <div&

005_01文档对象模型DOM

DOM:document object model  文档对象模型.是W3C织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容.结构和样式. W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 左边为HTML文档树,右边为结构树示意图 XML DOM 定义了访问和处理 XML 文档的标准方法. HTML文档格式 符合X

JavaScript学习笔记7 之DOM文档对象模型

一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM树中的所有节点均可通过JS进行访问.所有HTML元素(节点)均可被修改.创建或删除. 二.节点类型1.节点类型 HTML 文档中的所有内容都是节点(node): 整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素

文本对象模型(Document Object Model)

本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内容,结构和样式的语言平台,提供了标准的HTML和XML对象集,并有一个标准的接口来访问操作他们. --摘自W3C 文本对象模型(Document Object Model,DOM),最初是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准,然而主要是针对IE和Netscape Nav

Document类型[第10章-文档对象模型DOM 笔记2]

Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示整个 HTML 页面.而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问. Document 类型可以表示 HTML 页面或者其他基于 XML 的文档.不过,最常见的应用还是作为HTMLDocument 实例的 document 对象.通过这个文档对象,不

第10章 文档对象模型DOM 10.2 Document类型

Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示整个 HTML 页面.而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问. Document 类型可以表示 HTML 页面或者其他基于 XML 的文档.不过,最常见的应用还是作为HTMLDocument 实例的 document 对象.通过这个文档对象,不

javaScript文档对象模型

DOM :Document Object Model ---文档对象模型 DOM属于BOM的一种,当网页被加载时,浏览器会创建页面的文档对象模型 通过可编译的对象模型,JS获得了足够的能力创建动态的HTML. -JS 能够改变页面中的所有HTML元素.HTML属性.CSS样式.对页面中所有事件做出反应. DOM的操作有: -查找节点.读取节点信息.修改节点信息.创建新的节点.删除节点 读取和修改节点: nodeName:节点的名称 -文本节点:永远是 #text -文档节点:永远是#docume