javascript之DOM(Document Object Model) 文档对象模型
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="#">标题1</a>
<a href="#">标题2</a>
<a href="#">标题3</a>
<input type="button" onClick="writeUrl()" value="设置a标的地址"/>
</body>
<script type="text/javascript">
/*
DOM(Document Object Model) 文档对象模型 一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的
对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到
对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。 var allNodes = document.all; //获取html文件中的所有标签节点 。
for(var i = 0; i<allNodes.length ; i++){
alert(allNodes[i].nodeName); //标签的名字 nodeName;
} */ function writeUrl(){
var links = document.links; // 获取文档中含有href的属性的标签。
for(var i = 0; i<links.length ; i++){
links[i].href = "http://www.baidu.com"; } }
</script>
</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 = "/user.png";
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>
根据属性找标签demo
<!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"> function checkAll(allNode){
//找到所有的的选项
var items = document.getElementsByName("item");
//找到全选按钮的对象
//var allNode = document.getElementsByName("all")[0];
for(var i = 0 ; i<items.length ; i++){
items[i].checked = allNode.checked;
}
} function getSum(){
var items = document.getElementsByName("item");
var sum = 0;
for(var i = 0 ; i<items.length ; i++){
if(items[i].checked){
sum += parseInt(items[i].value);
}
}
var spanNode = document.getElementById("sumid");
spanNode.innerHTML = (" ¥"+sum).fontcolor("green");
} </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="1800" />笔记本电脑1800元<br />
<input type="checkbox" name="item" value="300" />笔记本电脑300元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br />
<input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>
</body>
</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">
/*
创建字节入插入节点、设置节点的属性。 document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置 */ var num = 1;
function add(){
var inputNode = document.createElement("input"); //创建一个指定标签名字的节点。 //setAttribute:设置节点的属性
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","按钮"+num);
num++; var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode); //appendChild 添加子节点。 } </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" onclick="add()" value="添加"/>
</body>
</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">
/*
插入目标元素的位置
elt.insertBefore(newNode, oldNode); 添加到elt中，child之前。
注意： elt必须是oldNode的直接父节点。 elt.removeChild(child) 删除指定的子节点 注意： elt必须是child的直接父节点。 */ function addFile(){
//先要创建一个tr对象
var trNode = document.createElement("tr");
//创建td对象
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
//
tdNode1.innerHTML ="<input type='file'/>";
tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";
//把td的节点添加到tr节点上
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2); var tbodyNode = document.getElementsByTagName("tbody")[0];
var lastRow = document.getElementById("lastRow"); tbodyNode.insertBefore(trNode,lastRow);
} //删除附件
function delFile(aNode){
var trNode = aNode.parentNode.parentNode;
var tbodyNode = document.getElementsByTagName("tbody")[0];
tbodyNode.removeChild(trNode);
} </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table>
<tr>
<td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td>
</tr> <tr id="lastRow">
<td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td>
</tr>
</table>
</body>
</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"> function showCity(){
//维护一个二维数组存储省份对应的城市
var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]]; //获取省份对应的节点
var provinceNode = document.getElementById("province");
//获取省份选中的选项
var selectIndex = provinceNode.selectedIndex;
//获取对应的城市
var cityDatas = citys[selectIndex]; //找到city节点
var cityNode = document.getElementById("city"); /*
//先清空city框所有option
var children = cityNode.childNodes;
for(var i = 0; i<children.length ; ){
cityNode.removeChild(children[i]);
}
*/ //设置options的个数。
cityNode.options.length = 1 ; //遍历对应的所有城市然后创建对应的option添加到city上。
for(var index = 0; index<cityDatas.length ; index++){
var option = document.createElement("option");
option.innerHTML = cityDatas[index];
cityNode.appendChild(option);
} } </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
省份<select id="province" onchange="showCity()">
<option>省份</option>
<option>广东</option>
<option>湖南</option>
<option>广西</option>
</select>
城市<select id="city"><option>城市</option></select> </body>
</html>
javascript之DOM(Document Object Model) 文档对象模型的更多相关文章
- DOM (Document Object Model)文档对象模型
[理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...
- JS--dom对象：document object model文档对象模型
dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...
- Eloquent JavaScript #11# The Document Object Model
索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...
- DOM(Document Object Model）
DOM(Document Object Model): 结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容. 结点类型 1.元素结点 对于元素结点的n ...
- DOM document object model learn
DOM对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的.如<p>I am a JavaScript hacker.</p>有两个节点,一个是 ...
- DOM - Document Object Model
Document Object Model
- XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。
XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. ...
- DOM Scripting -- Web Design with JavaScript and the Document Object Model 第2版 读书笔记
1. childNodes nodeValue <p id="p1">hello p!</p> alert(document.getElementById ...
- BOM—Browser Object Model and DOM—Document Object Model
浏览器对象模型的内涵是每个页面都是一个window对象,而dom是document为基准的模型,而document与wimdow.document指向相同,所以可以这么理解,bom模型的定义是包括do ...
随机推荐
- 使用metamask钱包
一.安装火狐浏览器metamask插件 打开火狐浏览器的附件组件,搜索metamask 点击第一个 点击“添加到Firefox” 添加成功后,浏览器右上角有一个狐狸标志 点击这个标志,打开插件 二.创 ...
- LeetCode3.无重复字符的最大子串
给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 "abc&quo ...
- 异步消息处理机制相关面试问题-AsyncTask面试问题详解
什么是AsyncTask: 它本质上是一个封装了线程池和handler的异步框架. AsyncTask的使用方法: 三个参数: 五个方法: AsyncTask的内部原理: AsyncTask的注意事项 ...
- Linux之vi文本编辑器
vi的基本概念 基本上vi可以分为三种状态,分别是命令模式(command mode).输入模式(Insert mode)和末行模式(last line mode),各模式的功能区分如下: 1) 命令 ...
- SpringBoot 上传读取图片 巨坑
之前自己也做过文件上传,不过存储路径放在那个tomcat服务器路径下,就没遇到什么问题 但前几天在做图片的上传,想把文件放在项目下指定的一个文件夹下,就感觉有点麻烦 修改配置文件 在springboo ...
- Alpha版本
这个作业属于哪个课程 [课程链接][ https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/] 这个作业要求在哪里 [作业要求][ ...
- shell进阶--流程
由于条件判断和循环跟其他语言都大同小异,学过编程的话很好理解,这里只贴出格式,不具体写用法了.(select菜单会详细讲一下) 条件判断 if条件判断 普通if条件判断: 嵌套if条件判断: 循环 f ...
- 一些需要禁用的PHP危险函数(disable_functions)
一些需要禁用的PHP危险函数(disable_functions) 有时候为了安全我们需要禁掉一些PHP危险函数,整理如下需要的朋友可以参考下 phpinfo() 功能描述:输出 PHP 环境信息 ...
- php类知识点滴---类的实例化，构造函数，继承初步
实例化类----黑科技用法,通过字符串来实例化 class coach { public function __construct() { echo "欢迎光临北武堂"." ...
- Java-FileUploadUtil工具类
package com.gootrip.util; import java.io.File; import java.util.*; import org.apache.commons.fileupl ...