JavaScript学习笔记——5.DOM(文档对象模型)

1.获得对象方式

方法一

  document.getElementsByTagName("div");

  document.getElementById("head");

  document.getElementsByName("username");

方法二 //通过数组

  document.all //存在为IE,不存在为FF

  document.body

  document.forms

  document.images

  document.links

2.操作对象

操作属性

操作内容

  .innerText //文字(IE)

  .textContent //文字(FF)

  .innerHTML //内容

  .value //表单内容

操作样式

  .style.color //获取或设置文本颜色

  .style.backgroundColor //获取或设置文本颜色

  注意:只能获取到行内样式中的属性值

  所以一些常用的但没有在行内设置的属性需要特殊的获取方式

  .offsetWidth //元素宽度(同css中的width)

  .offsetHeight //元素高度

  .offsetLeft //元素到文档左侧偏移距离(同css中的left)

  .offsetTop //元素到文档顶部偏移距离

  document.documentElement.clientWidth //窗口宽度

  document.documentElement.clientHeight //窗口高度

  document.body.scrollTop || document.documentElement.scrollTop //窗口滚动的顶部距离

  document.body.scrollLeft || document.documentElement.scrollLeft //窗口滚动的左侧距离

  注意:若同时需要操作的样式有多个,应该定义一个类,使用

  .className //设置类名

  .className="one two" //设置多个类名

  .className="one"

  .className+=" two" //设置多个类名的另一种方式(注意前面加空格)

  .className="" //清除类

3.模型

将整个文档看做一个倒树,每个元素(节点)都是相通的

获取节点

  .parentNode //父节点

  .childNodes //所有子节点

  .firstNode //第一个子节点

  .lastNode //最后一个子节点

  .nextSibling //下一个兄弟节点

  .previousSibling //上一个兄弟节点

节点属性

  .nodeType //类型

  元素为1 属性为2 文本为3

  注释为8 文档为9

  .nodeName //名称

  元素名为标签名 属性名为属性名 文本名为#text

  文档名为#document

  .nodeValue //内容

  文本内容为文字 属性内容为属性值

  其他类型无nodeValue

创建节点

  document.createElement() //创建元素

  .appendChild() //作为子节点插入到对象中

  .insertBefore() //作为兄弟节点插入到对象前

  .removeChild() //删除节点

表单对象

  document.form //form为表单的name

  .name //获取表单元素(属性)

  .focus() //获取焦点方法

  .submit() //提交方法

  onsubmit() //form上的提交事件

  .options[] //select中的option对象

  .selectedIndex //select中option对象的索引值

作者:@zhnoah
出处:http://www.cnblogs.com/zhnoah/
本文版权归本人和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 
接,否则保留追究法律责任的权利。

时间: 2024-12-10 14:04:37

JavaScript学习笔记——5.DOM(文档对象模型)的相关文章

javascript学习笔记之DOM

DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节点类型,利用12个数值来表示.1代表Element,2代表attribute,3代表Text... 2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型 2.节点关系相关属性 I.childNodes属性,返回一个NodeList对象,这是一个有生命,会呼吸的对象,能够

JavaScript(三、DOM文档对象模型)

一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式." W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对

javascript学习笔记:DOM节点概述

0x01: DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成.本文将主要说明DOM节点类型.HTML DOM 定义了访问和操作 HTML 文档

javascript学习笔记:DOM节点关系和操作

0x01:前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不同的信息及标记.每个节点都拥有各自的特点.数据和方法,也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.本文将详细描述DOM间的节点关系和基础的DOM操作.节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱.接下来,将把DOM节点关系分为属性和方法两部分进行详细说明. 0x02:属性 父级属性par

DOM文档对象模型 | Javascript

# 在学过python这样的面向对象编程语言之后,可以用其思维方式来学习Javascript; # DOM文档对象模型就相当于一个包,或者模块,定义了许多类,对网页做操作; # Document类型 # document对象时HTMLDocument的一个实例; # 1.两种访问子节点的快捷方式: # ①documentElement # var html = document.documentElement直接取得<html>的引用; # ②childNodes列表访问文档元素 # 附:do

DOM 文档对象模型+倒计时

DOM 文档对象模型 DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号来表明家庭成员之间的关系. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够

javascript学习笔记——如何修改&lt;a href=&quot;#&quot;&gt;url name&lt;/a&gt;

0.前言 使用了一段时间javascript,再花了点时间学习了jquery,但是总是感觉自己很"迷糊",例如<a href="#">url name</a>中,如果修改href中的"#"应如何编写代码,如果修改url name应如何编写代码.再加上javascript和jquery操作方法略有不同,所以我就更"迷糊"了. [说明] 曾经使用关键词--"innerHTML和value区别&qu

javascript学习笔记---ECMAScript语法(变量)

变量声明关键字var: var i = 1: var t = "asd"; var test1 = "hi", test2 = "hello"; 声明变量不一定要初始化, var i;//ok 另一方面在使用变量前若未加关键字var,则此变量为全局变量(此特性需特别记住). 变量名字: 变量名需要遵守两条简单的规则: 第一个字符必须是字母.下划线(_)或美元符号($) 余下的字符可以是下划线.美元符号或任何字母或数字字符 命名变量规则: Came

JavaScript学习笔记【2】表达式和运算符、语句、对象

笔记来自<JavaScript权威指南(第六版)> 包含的内容: 表达式和运算符 语句 对象 表达式和运算符 数组直接量中的列表逗号之间的元素可以省略,这时省略的空位会填充值undefined.元素列表末尾可以留下单个逗号,这时并不会创建一个新的值为undefined元素. 属性访问表达式,.identifier的写法只适用于要访问的属性名称是合法的标识符,并且需要知道要访问的属性的名字.如果属性名称是一个保留字或者包含空格和标识符,或是一个数字(对于数组来说),则必须使用方括号的写法.当属性