<!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. MySQL数据类型DECIMAL用法

    MySQL DECIMAL数据类型用于在数据库中存储精确的数值.我们经常将DECIMAL数据类型用于保留准确精确度的列,例如会计系统中的货币数据. 要定义数据类型为DECIMAL的列,请使用以下语法: ...

  2. 90. Subsets II(中等，编写代码有难度)

    Given a collection of integers that might contain duplicates, nums, return all possible subsets. Not ...

  3. jquery插件存档

    1.选择插件selectMenu github地址:https://github.com/josiaho/selectMenu 2.选择插件bootstrap_multiselect 官方地址:htt ...

  4. Python中and(逻辑与)计算法则

    在程序设计中,and称为逻辑与运算,也称布尔运算:1.and是在布尔上下文中从左到右计算表达式的值:2.0.''.[].().{}.None.False在布尔上下文中为假:其它任何东西都为真:3.如果 ...

  5. 保留键的情况下取字典中最大的值(max\zip函数的联合使用)

    在我们平常想要获取字典中value最大或者最小的值的时候,常常使用如下函数: testDict = {"age1":18,"age2":20,"age ...

  6. 南京邮电大学java程序设计作业在线编程第五次作业

    王利国的"Java语言程序设计第5次作业(2018)"详细 主页 我的作业列表 作业结果详细 总分:100 选择题得分:50  1. 以下哪一个工具是Java的编译器?( ) A. ...

  7. 01_自动化构建工具之Maven

    目前技术中存在问题(为什么使用Maven): 一个项目就是一个工程: 缺陷:如果项目太过庞大,就不适合使用package来划分层次,最好是一个模块就是一个工程,利于分工协作. 解决:Maven可以将一 ...

  8. Android反编译（未混淆的apk）

    Android反编译(未混淆的apk) 工具 dex2jar 下载地址:我的CSDN 或者 官网 jd-gui 下载地址:我的CSDN 或者 官网 反编译步骤 1. 将APK解压缩,获取classes ...

  9. 全废话SQL Server统计信息（2）——统计信息基础

    接上文:http://blog.csdn.net/dba_huangzj/article/details/52835958 我想在大地上画满窗子,让所有习惯黑暗的眼睛都习惯光明--顾城<我是一个 ...

  10. 优化Javascript数据遍历

    问题 M是一个对象的集合,没个对象拥有唯一的字符串类型的Id N是Id的集合. 从M中过滤掉Id不在N中的对象. 假如M有50w个数据,N中可能是0~50w任意的数据. 方案1 使用数组保存Id的集合 ...