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

前言：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. Python_web框架解析

    这一阵正在学习廖雪峰老师的实战课程,这里对其中web.py框架进行一些分析,总结一下学到的东西. 这一部分的课程网站:http://www.liaoxuefeng.com/wiki/001374738 ...

  2. codewars-random（3）

    思路:两个嵌套的for循环(不推荐,应该有更好的.) 具体代码:function longestConsec(strarr, k) {    // your code    var n = strar ...

  3. 【CodeVS】1293

    输入输出样例 思路:看到题目我萌第一眼想到的肯定是求联通快对吧,但是这个联通快有点奇特,因为 这样他也算是一个联通快.解决此题其实有三种解法:1)宽搜(这个符合基本法):2)并查集:3)灌水法 但是蒟 ...

  4. Linux 下Nginx 的安装及负载均衡的简单配置

    这次发布程序需要均衡负载,网上看了一下这方便的东西,觉得很不错,学完之后做下总结,一遍后期用到. 1.安装nginx之前需要安装的两个依赖,pcre-x.x.x.tar.gz 和pcre-devel- ...

  5. UVAlive 6833 Miscalculation 字符串处理

    去年省选的题 因为卡了这道题再加上队友占机时 省选第一天华丽爆零了 用事实证明了1+1+1<1的事实 毕竟下半年单挑了东北赛名额 省赛打不出来名额就真的就不怪我了(摔 现在有拿出来做 长个记性 ...

  6. textfile 属性

    //设置textfile的Placeholder的颜色和字体大小 nameText.attributedPlaceholder = NSAttributedString.init(string: &q ...

  7. CodeForces 669C Little Artem and Matrix GNU

    模拟. 把操作记录一下,倒着复原回去. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cs ...

  8. tomcat服务配置及搭建

    一.在官网上下载tomcat 下载地址:http://tomcat.apache.org/download-60.cgi 下载完后解压 二.设置环境变量 1,JAVA_HOME 2.CATALINA_ ...

  9. Hihocode 1015 KMP算法

    时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编程的学习道路上一同前进. ...

  10. PHP22期基础班技术总结