javascript之DOM编程通过html元素的标签属性找节点
<!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元素的标签属性找节点的更多相关文章
- JavaScript的DOM编程--02--获取元素节点
如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取 ...
- JavaScript的DOM编程--04--获取元素节点的子节点
获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...
- 高性能Javascript(2) DOM编程
第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...
- HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
- 高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
- JavaScript的DOM编程--01--js代码的写入位置
DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(h ...
- 高性能JavaScript（DOM编程）
首先什么是DOM?为什么慢? DOM:文档对象模型,是一个独立于语言的,用于操作XML和HTML文档的程序接口(API) 用脚本进行DOM操作的代价很昂贵.那么,怎样才能提高程序的效率? 1.DOM访 ...
- javaScript DOM编程经常使用的方法与属性
DOM是Document Object Model文档对象模型的缩写.依据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你能够訪问页面其它的标准组件. Node接口的特性和方法 ...
- JavaScript的DOM编程--10--删除节点
1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...
随机推荐
- Nginx+tomcat配置集群负载均衡
开发的应用采用F5负载均衡交换机,F5将请求转发给5台hp unix服务器,每台服务器有多个webserver实例,对外提供web服务和socket等接口服务.之初,曾有个小小的疑问为何不采用开源的a ...
- include和require的区别比较
require 的使用方法如 require("MyRequireFile.php"); .这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require ...
- IO复制多级目录 控制台输入文件目录然后把目录下java文件复制到 D: 并统计java个数
package cn.itcast_05; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; impor ...
- 南京邮电大学java程序设计作业在线编程第五次作业
王利国的"Java语言程序设计第5次作业(2018)"详细 主页 我的作业列表 作业结果详细 总分:100 选择题得分:50 1. 以下哪一个工具是Java的编译器?( ) A. ...
- C++框架_之Qt的窗口部件系统的详解-上
C++框架_之Qt的窗口部件系统的详解-上 第一部分概述 第一次建立helloworld程序时,曾看到Qt Creator提供的默认基类只有QMainWindow.QWidget和QDialog三种. ...
- ng-book札记——内置指令
Angular提供了一些内置指令(directive),这些添加在HTML元素(element)上的特性(attribute)可以赋予更多的动态行为. NgIf ngIf指令用于在某个条件下显示或者隐 ...
- MySQL CURTIME() 函数
定义和用法 CURTIME() 返回当前的时间. 语法 CURTIME() 实例 下面是 SELECT 语句: SELECT NOW(),CURDATE(),CURTIME() 结果如下所示: NOW ...
- PHP MySQL Update
UPDATE 语句用于中修改数据库表中的数据. 更新数据库中的数据 UPDATE 语句用于更新数据库表中已存在的记录. 语法 UPDATE table_name SET column1=value, ...
- Git 常用命令速查表
- Dynamics CRM2016 关闭错误报告弹框提示
在之前的版本中错误报告的弹框提示是可以在隐私首选项中设置关闭的,如下图所示 但是在2016中这个设置没了 有人说在右上角的选项中设置,但那个只能是设置个人的无法修改系统级别的.在系统中找了半天还是没有 ...