JavaScript的DOM(文档对象)基础语法总结1

---恢复内容开始---

前言:HTML文档可以说由节点构成的集合,DOM节点有:

1). 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2). 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3). 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

1、节点属性:

2、遍历节点树:

3、DOM操作:

4、getElementsByName()方法

//语法
document.getElementsByName(name)

注意:

1)因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

2)和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。

//例子
function getnum(){
  var mynode=document.getElementsByName("myt")         ;
  alert(mynode.length);
}
</script>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<input type="button" onclick="getnum()" value="看看有几项?" />
//获取 name 为 myt 的元素,同时输出获取的元素节点的长度。

5、getElementsByTagName()方法:返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

//语法
document.getElementsByTagName(Tagname)

说明:

1)Tagname是标签的名称,如p、a、img等标签名。

2)和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。

//例子
function getnum(){
  var mynode=document.getElementsByTagName("input") ;
  alert(mynode.length);
}
</script>
<input type="text" value="1">
<input  type="text" value="2">
<input  type="text" value="3">
<input type="button" onclick="getnum()" value="看看有几个input标签?" />
//获取input标签,同时输出获取的元素节点的长度。
时间: 2024-08-28 02:27:45

JavaScript的DOM(文档对象)基础语法总结1的相关文章

JavaScript之DOM文档对象模型

1.DOM是文档对象模型(Document Object Model)的简称. 当网页加载时,可以将结构化文档在内存中转换成对象树. 简单的说,DOM并不是一种技术,而是一种访问结构化文档的思想.借助DOM模型,我们可以对DOM树进行修改.删除.新增等操作,让结构化文档动态化. 2.DOM模型中的节点--文档可以说是由节点构成的集合.在DOM模型中有以下3种节点: (1)元素节点:各种标签就是这些元素节点的名称,如<ul>.<p>等: (2)文本节点:文本节点总是被包含在元素节点的

DOM 文档对象

一.HTMLCollection对象 <1> getElementById('') getElementsByTagName(''); getElementsByName(''); <2> document.anchors document.forms document.images document.links <1>和<2>返回的均是HTMLCollection对象 namedItem('')方法 var myImg = images.namedItem

第一百一十三节,JavaScript文档对象,DOM基础

JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 一.DOM介绍 DOM中的三个字母,D(文档)可以理解

第一百一十四节,JavaScript文档对象,DOM进阶

JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容

JavaScript学习总结(一)DOM文档对象模型

一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函数被称为这个对象的方法. JavaScript中有三种类型的对象: ①用户自定义对象:不做了解 ②内建对象(native object):JavaScript中一开始就存在的.列如Array,Math,Date等(JavaScript语法区分大小写) ③宿主对象(host object):由浏览器提供的对象.

js基础,DOM 文档对象模型

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

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

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

JavaScript : DOM文档解析详解

JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> Don’t forget to buy this stuff.</p> 节点及其类型 元素节点: 属性节点:元素的属性,可以直接通过属性的方式来操作 文本节点:元素节点的子节点,其内容通常为文本 2.Node接口的特性和方法 现在给出一个演示的HTML文件: html <!doctype h

JavaScript中的Document文档对象

Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档.描述当前窗口或指定窗口对象的文档.它包含了文档从到的内容. 用法:document (当前窗口) 或 <窗口对象>.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的定义的文字.在 Netscape 里本属性不接受赋值. fgColor 指标记的 text 属性所表示的文本颜色. bgColor 指标记的 bgcolor

Javascript 强制浏览器渲染Dom文档

当浏览器在执行一段js代码的过程中,一般不会立即更新渲染dom文档,而是在整段代码执行完毕的时候才去更新dom文档. 浏览器这么实现,是为了尽可能提高性能.但这种实现有时候会给我们带来一些意外的负面效果. js访问以下 Dom属性的时候,浏览器都会先渲染Dom文档,再获得相关的属性.从而强制浏览器立即渲染Dom文档. offsetTop, offsetLeft, offsetWidth, offsetHeightscrollTop, scrollLeft, scrollWidth, scroll