<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

/*

	通过html元素的标签属性找节点。

		document.getElementById("html元素的id")

		document.getElementsByTagName("标签名")

		document.getElementsByName("html元素的name")

*/

	function showText(){

		var inputNode = document.getElementById("userName");  //根据ID属性值找元素

		inputNode.value = "设置好了文本";

	}

	//InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.

	function showImage(){

		var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。

		for(var i = 0 ; i<images.length ; i++){

			images[i].src = "33.jpg";

			images[i].width="100";

			images[i].height="100";

		}

	}

	 function showDiv(){

		var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签，返回的是一个数组。

		for(var i = 0 ; i<divs.length ; i++){

			divs[i].innerHTML = "哈哈".fontcolor("red");

		}

	}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

	<input type="text" id="userName" value="请输入用户名..." /><input type="button" onclick="showText()" value="设置文本"/>

    <hr/>

    <img src="" />

    <img src="" />

    <img src="" />

    <input type="button" onclick="showImage()" value="显示图片"/>

   <hr/>

    <div name="info"></div>

    <div name="info"></div>

    <div name="info"></div>

     <input type="button" onclick="showDiv()" value="设置div内容"/>

</body>

</html>

javascript之DOM编程通过html元素的标签属性找节点的更多相关文章

  1. JavaScript的DOM编程--02--获取元素节点

    如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取 ...

  2. JavaScript的DOM编程--04--获取元素节点的子节点

    获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...

  3. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  4. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  5. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  6. JavaScript的DOM编程--01--js代码的写入位置

    DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(h ...

  7. 高性能JavaScript（DOM编程）

    首先什么是DOM?为什么慢? DOM:文档对象模型,是一个独立于语言的,用于操作XML和HTML文档的程序接口(API) 用脚本进行DOM操作的代价很昂贵.那么,怎样才能提高程序的效率? 1.DOM访 ...

  8. javaScript DOM编程经常使用的方法与属性

    DOM是Document Object Model文档对象模型的缩写.依据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你能够訪问页面其它的标准组件. Node接口的特性和方法 ...

  9. JavaScript的DOM编程--10--删除节点

    1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...

随机推荐

  1. Nginx 安装 配置 使用

    Nginx 安装 配置 使用 基本的HTTP服务器特性 处理静态文件,索引文件以及自动索引:打开文件描述符缓存(缓存元数据和文件描述符,下一次可以直接从内存找到数据或者文件的位置): 使用缓存加速反向 ...

  2. 托管C++、C++/CLI、CLR

    1.什么是托管C++? 在回答这个问题,首先要搞清楚什么是"托管"(Managed).托管是.NET的一个专门概念,它是融于通用语言运行时(CLR)中的一种新的编程理念,因此我们完 ...

  3. Python安装与环境变量

    Python安装与环境变量的配置  python下载: Python安装包下载地址:http://www.python.org/ 根据实际的操作系统,安装合适的安装版本.    Python安装: 本 ...

  4. delphi 面向对象实用技能教学一(递归)

    本例使用类与TList相结合,用简洁的方法,实现了一个 HTML 解析与格式化功能.所用到的知识点如下:1.类的提前申明2.TList用法3.String的指针操作4.单例设计5.递归用法 编程是综合 ...

  5. delphi 给EXE文件增加区段

    学习 PE 可执行文件格式,用 delphi 实现给 EXE 文件增加区段 源码下载(StudyPE.zip) unit uStudyPE; interface uses Classes, SysUt ...

  6. C++后台实践：古老的CGI与Web开发

    本文写给C/C++程序猿,也适合其他对历史感兴趣的程序猿 ============================================= 谈到web开发,大家首先想到的PHP.JavaEE ...

  7. 豌豆夹Redis解决方案Codis源码剖析：Proxy代理

    豌豆夹Redis解决方案Codis源码剖析:Proxy代理 1.预备知识 1.1 Codis Codis就不详细说了,摘抄一下GitHub上的一些项目描述: Codis is a proxy base ...

  8. 如何扩展/删除swap分区

    背景:         由于安装Oracle 的时候,swap太小只划分了4G,后期发现交换分区太小,不满足使用,于是进行了swap分区的扩容过程: swap分区的扩展很简单,但是需要root用户权限 ...

  9. [OpenCV]拓展图像边界

    图像处理中经常遇到使用当前像素邻的像素来计算当前像素位置的某些属性值,这样就会导致边界像素处越界访问,一般有两种方法解决这种问题:只对不越界的像素进行处理:对图像边界进行拓展,本文主要介绍如何使用Op ...

  10. 【安卓开发】用PageTransformer打造更好的动画效果

    Android的ViewPager类已经变成一个相当流行的Android应用组件了.它简单直观,并且提供了极好的功能.你可以经常在设置向导,图片画廊种看到它,它还是分开应用内容的良好方式. 标准的Vi ...