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

前言: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的更多相关文章

  1. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

  2. DOM文档对象总结

    DOM总结: DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 ...

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

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

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

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

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

    一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...

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

    一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...

  7. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  8. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  9. 文档对象类型DOM

    1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...

  10. Javascript 强制浏览器渲染Dom文档

    在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...

随机推荐

  1. 访问mysql出现“Access denied for user root@localhost”(using password:NO)解决方案

    首先声明,出现这个提示的原因有很多,以下只针对我遇到的一种情况 使用解压缩版安装mysql的时候,data文件夹是自己新建的,my-default.ini也是自己配置的,这时直接启动mysql服务的时 ...

  2. Virtualbox中的Linux:未能加载虚拟光驱 VBoxsGuestAdditions.iso到虚拟电脑

    安装增强功能 出现了 这个问题,需要弹出光盘,再次安装.

  3. 百度的hao123.com篡改浏览器首页,解决办法

    快捷方式右键找到chrome.exe, 把chorme.exe修改成别的名字例如 chromeFuckHao123.exe 就OK了. hao123是用病毒的形式查找chrome.exe然后进程注入的 ...

  4. Google Daydream 在中国的第一次演讲摘录

    从 PC.手机到 VR/AR,计算机平台正在迁移,而在这个过程中,与用户使用体验息息相关的「人机交互方式」也将不可避免的发生变化.作为这几波浪潮的弄潮儿,Google 怎么看这种人机交互方式的演进? ...

  5. mysql5.7.17安装问题

    在根目录新建data文件夹和my.ini,把ini复制到bin目录下才可以

  6. [MFC] 对话框菜单项Menu选中打勾(单选,多选)

    近期需要实现一个功能:MFC对话框中,一项菜单下有五个菜单项,改变菜单项选中状态,每次只能选择其中一个打勾.(单选) 然后在网上搜了下资料,稍微总结下,以防后面用到. 1.单选实现: CMenu* m ...

  7. Everything(速度快的文件搜索软件) 1.4.1.801b 汉化绿色版

    软件名称: Everything(速度快的文件搜索软件) 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 2.0MB ...

  8. tableviewcell 点击 设置

    table?.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) //设置cell 下边线 位置 table?.se ...

  9. React native android 最常见的10个问题

    这里逐条记录下最容易遇到的React native android 相关case: 1. app启动后,红色界面,unable load jsbundle : 解决办法:一般来说就是,你是用dev-s ...

  10. Java源程序结构

    完整的java源程序应该包括下列部分: 1.package语句 l java编译器为每个类生成一个字节码文件,且文件名与类名相同,这就会带来一个问题:同名的类会发生冲突. l 所以package的两个 ...