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="">
<input name="myt" type="text" value="">
<input name="myt" type="text" value="">
<input name="myt" type="text" value="">
<input name="myt" type="text" value="">
<input name="myt" type="text" value="">
<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="">
<input type="text" value="">
<input type="text" value="">
<input type="button" onclick="getnum()" value="看看有几个input标签?" />
//获取input标签,同时输出获取的元素节点的长度。
JavaScript的DOM(文档对象)基础语法总结1的更多相关文章
- 前端开发—BOM对象DOM文档对象操作
BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...
- DOM文档对象总结
DOM总结: DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- 第一百一十四节,JavaScript文档对象,DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- JavaScript学习总结(一)DOM文档对象模型
一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- 文档对象类型DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
- Javascript 强制浏览器渲染Dom文档
在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...
随机推荐
- cocos2d基本类介绍 director/scene/layer/sprite
[核心类] 导演Director.场景Scene.布景层Layer.精灵Sprite的概念请移步: 导演控制场景,场景控制图层,图层控制精灵,精灵控制动作. 相互之间的关系框架 ...
- 0-ajax操作json(番外篇)
[可以先看后边再看此文] get获取json 前端代码 <!DOCTYPE html> <html> <head> <meta charset="u ...
- [CSS3备忘] transform animation 等
一些CSS不经常用就会忘记,好吧,现在整理再学习一下,也留做备忘,方便以后查看... perspective的理解: 1.数值越小,用户与3D空间Z平面距离越近,视觉效果更令人印象深刻(比如看电影,越 ...
- C语言:json库使用学习
Json基础 一.Json的概念 Json(Javascript Object Notation)全称为JavaScript对象表示法,是一种轻量级的数据交换格式,采用完全独立于语言的文本格式.JSO ...
- java集合图示
- org.apache.log4j.Logger 详解
org.apache.log4j.Logger 详解 1. 概述 1.1. 背景 在应用程序中添加日志记录总的来说基于三个目的 :监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计 ...
- EF CodeFirst使用MySql
1.引入包 EntityFramework MySql.Data.Entity 2.配置文件 web.config <connectionStrings> <add name=&qu ...
- List list = new ArrayList()
方便以后扩展List是一个接口,而ArrayList 是一个类. ArrayList 继承并实现了List.List list = new ArrayList();这句创建了一个ArrayList的对 ...
- Django命令行相关命令 以及创建一个空白网页的步骤
django相关命令行命令: django.admin.py是Django的一个用于管理任务的命令行工具,manage.py是对django-admin.py的简单包装,每个Django Projec ...
- Mysql 常用命令和注意事项
1. 连接mysql数据库 如果配置了环境变量可以直接运行,如果没有配置环境变量需要在安装目录...\bin下运行, cmd -> mysql -u root -p,然后输入密码: 或者可以运行 ...