文档对象模型DOM（一）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
每加载一个标记 注释 或者属性，就将其当做节点（node）。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
1) getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body> <h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题，会提示出它的值。</p> </body>
</html>
2) getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body> <input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements?" /> </body>
</html>
3) getElementsByName() 方法可返回带有指定名称的对象的集合。
注意一下（不兼容） 在ie它只得到标准元素中有name属性的
FF chorem 都可以得到
建议getElementsByName 推荐使用针对表单的时候
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body> <input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" /> </body>
</html>
兼容函数（getElementsByClassName）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function myGetElementsByClassName(className){
var els=[];
if(document.all){//只认识IE；
// alert(IE);
var elements=document.getElementsByTagName("*");
// alert(elements.length);
for(var i=0;i<elements.length;i++){
if(elements[i].className==className){
els.push(elements[i]);
}
} }
else{
els=document.getElementsByClassName(className);
}
return els;
};
</script>
</head> <body>
<input type="button" class="input1" id="in" value="第一个"/><br/>
<input type="button" class="input1" name="one" value="第二个"/><br/>
<input type="button" class="input" name="two" value="第三个"/><br/>
<input type="button" class="input" name="one" value="第四个"/><br/>
<script> var els=document.getElementsByClassName("input");
// alert(els.length);
for(var i=0;i<els.length;i++){
els[i].style.backgroundColor="blue";
}
</script>
</body>
</html>
创建和操作节点；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px red solid;
}
#one{
width:100px;
height: 100px;
}
#two{
width:50px;
height: 50px;
}
</style> <script>
window.onload=function(){
var bnt=document.getElementsByTagName('button')[0];
bnt.onclick=function(){
/*var p=document.createElement('p');
var text=document.createTextNode('你好');
p.appendChild(text);
document.body.appendChild(p);
*/
//我们可以使用一个简便的方法就是使用innerHTML;
var p=document.createElement('p');
p.innerHTML='<span>你好</span>';//这样可以直接添加很多的节点
document.body.appendChild(p);//添加节点 appendChild 默认是的从最后开始添加 var div = document.getElementById("one");
//删除节点
// document.body.removeChild(div);
var div2 = document.getElementById("two");
// div.removeChild(div2); var div5 = document.createElement("div");
div5.innerHTML="div555";
//替换子节点
// div.replaceChild(div5,div2);//replaceChild(newnode,oldnode) //插入
div.insertBefore(div5,div2);//insertBefore(newnode,oldnode)
// 复制节点(参数) true 会复制它的子节点
// false 只复制这个节点本事，但是不复制它的子节点
// var div6 = div2.cloneNode(false);
//div.appendChild(div6); }; };
</script>
</head>
<body>
<button>点击</button>
<div id="one">
div1
<div id="two">
div2
</div>
<div>
div3
</div>
<div>
div4
</div> </div>
</body>
</html>
文档对象模型DOM（一）的更多相关文章
- JavaScript编程：文档对象模型DOM
5.文档对象模型DOM JS里的DOM和XML里的DOM不同,但是解析方式是一样的. document.getElementByID("id")根据ID获得元素节点. 创建和操作节 ...
- 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- 文档对象模型DOM通俗讲解
转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...
- 文档对象模型DOM
文档对象模型 DOM 1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 提供给用户操作document obj 的标准接口 文档对象模型 是表示和操作 H ...
- JavaScript的文档对象模型DOM
小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...
- 第10章 文档对象模型DOM 10.1 Node节点类型
DOM是针对 HTML 和 XML 文档的一个 API(应用程序编程接口) .DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM 脱胎于Netscape 及微软公司创始 ...
- 第10章 文档对象模型DOM 10.2 Document类型
Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示 ...
- 第10章 文档对象模型DOM 10.3 Element类型
Element 类型用于表现 XML或 HTML元素,提供了对元素标签名.子节点及特性的访问. 要访问元素的标签名,可以使用 nodeName 属性,也可以使用 tagName 属性:这两个属性会返回 ...
- 文档对象模型DOM(二)
练习: 要求:界面上有个登录按钮,点击登录的时候,界面中弹出一个登录的方框,点击登录方框中的×的,登录方框消失. <!DOCTYPE html> <html> <head ...
随机推荐
- Pyenv 安装部署
Pyenv Pyenv是个多版本Python管理器,可以同时管理多个Python版本共存, 区别于virtualenv. 安装 git clone git://github.com/yyuu/pyen ...
- hdu 1716 排列
题目 这道题是全排列问题,主要注意的是格式问题.觉得下面这种写法最为巧妙 #include <cstdio> #include <iostream> #include < ...
- Android记录10--android.os.NetworkOnMainThreadException异常解决办法
2013年11月1日小光棍节 有一段时间没有发表新的博客了,最近一直在忙着开发新浪微博客户端遇到很多问题比较头痛,比如说本篇博客要讲的NetworkOnMainThreadException这个异常, ...
- 数组中超过N分之一的数字
寻找数组中超过一半的元素,这是一道十分经典和普遍的面试题了,实现起来比较容易,只是需要写技巧,将问题扩展就可以衍生到求数组中几个超过N分一的元素,例如找出数组中3个出现次数超过1/4的元素. /*** ...
- 如何利用JUnit开展一个简单的单元测试（测试控制台输出是否正确）
待测类(CreateString)如下: public class CreateString { public void createString() { //Output the following ...
- 在 Centos7 的KVM上启用嵌套虚拟化
1.嵌套虚拟化意味着在虚拟机内配置虚拟化环境.换句话说,我们可以说嵌套虚拟化是虚拟机管理程序hypervisor的一个特性,它允许我们通过虚拟化管理程序(宿主机)的硬件加速在虚拟服务器内安装和运行虚拟 ...
- Django：haystack全文检索详细教程
参考:https://blog.csdn.net/AC_hell/article/details/52875927 一.安装第三方库及配置 1.1 安装插件 pip install whoosh dj ...
- Windows8.1 安装SQL Server2012——部分组件安装不成功！（提示安装.NET 3.5时出错，无Internet情况下利用win8.1安装镜像安装.NET 3.5）
虽然从事着与开发毫无关系的工作,但却也断断续续维持了近6年的WEB开发,有时因为其它工作原因,可能每做一个项目的时间间隔比较大,有时甚至在做的一个项目因为其他事情而停滞几个月之久(有些项目是自己兴趣或 ...
- ASP.NET Core ef启用数据迁移
创建一个项目 通过Nuget获取EF Core相关的扩展包 appsettings.json 建立数据库连接串 创建数据库上下文EntityDbContext类,用于实体类映射数据库表 使用包管理器控 ...
- 【C#】简单的发送socket字符串
1 打开VS,新建一个C#窗口程序 2 添加按钮 3 写按钮的事件代码 双击这个按钮 进入代码界面 输入如下内容,注意IP和端口 private void button1_Click(object s ...