8.6 JavaScript之HTML的DOM（三）
1.33 JavaScript之HTML的DOM（三）
一、DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM把所有的html都转换为节点 、整个文档 是一个节点 、元素 是节点
元素属性 是节点 、元素内容 是节点 、注释 也是节点
<html>
<body>
<div id="d1">hello HTML DOM</div>
</body>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
//通过document.getElementById获取了id=d1的div标签对应的元素节点
var div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
//然后通过attributes 获取了该节点对应的属性节点
p("属性节点"+div1.attributes[0]);
//通过childNodes获取了内容节点
p("内容节点"+div1.childNodes[0]);
</script>
</html>
二、获取节点
在设计html的时候，一个元素对应的id应该是唯一的。
1.可以通过document.getElementById 获取某个元素对应的元素节点对象
2.所有的元素都有标签名 、通过 getElementsByTagName 根据标签名称获取一个元素数组。
<html>
<div id = "d1">hello HTML DOM</div>
<div >hello BOM</div>
<div >hello DOM</div>
<script>
//1.document.getElementById 获取某个元素对应的元素节点对象
var div1 = document.getElementById("d1");
document.write(div1);
document.write("<br>");
//2. getElementsByTagName 根据标签名称获取一个元素数组。
var divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++){
document.write(divs[i]);
document.write("<br>");
}
</script>
</html>
3、通过类名获取元素节点，与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组
<html>
<h1 class="d" >hello javascript</h1>
<h2 class="d" >hello BOM</h2>
<div class="d" >hello DOM</div>
<br>
<script>
var elements= document.getElementsByClassName("d"); for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
4、表单元素都有name属性，通过getElementsByName可以根据name属性的值，获取元素节点。
<html>
用户名 <input name="userName"> <br>
密码 <input name="userPassword">
<br>
<script>
var elements= document.getElementsByName("userName"); for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
这是因为javascript是解释语言，是顺序执行的。 在执行到 document.getElementById的时候，div标签还没有加载，所以无法获取。
5、获取节点的属性
nodeName 节点名称
1、document.nodeName 文档的节点名，是 固定的#document
2、div1.nodeName 元素的节点名，是对应的标签名 div
3、div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
4、div1.childNodes[0].nodeName 内容的节点名，是固定的 #text
nodeValue 节点值
1、document.nodeValue 文档的节点值，是 null
2、div1.nodeValue 元素的节点值，是null
3、div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
4、div1.childNodes[0].nodeValue 内容的节点值，是内容 即： #text
nodeType 节点类型（元素1，属性2，文本3，注释8，文档9）
1、document.nodeType 文档的节点类型，是 9
2、div1.nodeType 元素的节点类型，是 1
3、div1.attributes[0].nodeType 属性的节点类型，是 2
4、div1.childNodes[0].nodeType 内容的节点类型，是 3
innerHTML 元素的文本内容 id、value
1、修改与获取内容的值可以通过 childNodes[0].nodeValue进行 、还有个简便办法就是通过innerHTML进行。 效果是一样的。
className 元素上的属性input1.className
三、HTML DOM常用事件
3.1 焦点事件
当组件获取焦点的时候，会触发onfocus事件
当组件失去焦点的时候，会触发onblur事件
<input type="text" onfocus="f()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" onblur="b()"placeHolder="输入框2">
<br>
<br>
<div id="message"></div>
<script>
function f(){
document.getElementById("message").innerHTML="输入框1获取了焦点";
}
function b(){
document.getElementById("message").innerHTML="输入框2丢失了焦点";
}
</script>
3.2 点击事件
点击事件，由单击，双击按两个事件组成
当在组件上单击的时候，会触发onclick事件
当在组件上双击的时候，会触发ondblclick事件
注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果
注2: 自定义函数不要使用click()，这是保留函数名。
<input type="button" onclick="singleClick()" ondblclick="doubleClick()" value="用于演示单击和双击" > <br>
<br>
<div id="message"></div> <script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
} function doubleClick(){ document.getElementById("message").innerHTML="双击按钮";
}
</script>
3.3 提交事件
<form action="/study/login.jsp" onsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
alert("提交表单");
}
</script>
双击选中所有代码
试一下
8.6 JavaScript之HTML的DOM（三）的更多相关文章
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
- JavaScript之旅（DOM）
JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...
- [转]javascript指定事件处理程序包括三种方式：
javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...
- JavaScript高级程序设计（第三版）学习，第一次总结
Array类型 var arr = []; arr.length; //返回数组元素个数 改变length可以动态改变数组大小 检测数组 instanceof可以检测某个对象是否是数组,限制:只能是一 ...
- 赠书《JavaScript高级程序设计（第三版）》5本
本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r ...
- JavaScript大杂烩10 - 理解DOM
操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标. DOM树 - HTML结构的抽象 既然DOM是操纵HTML ...
- JavaScript的BOM和DOM
JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...
- JavaScript之BOM和DOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- [JavaScript之BOM与DOM]
[JavaScript之BOM与DOM] BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ( ...
随机推荐
- 怎样快捷获取网页的window对象
使用document.defaultView; document.defaultView === window 注意: 1. 如果当前文档不属于window对象, 则返回null; 2. docume ...
- Advanced Installer 关于桌面的快捷方式。
由于软件自动生成快捷方式,我发现桌面可以存在多个软件的快捷方式,因为快捷方式只要名字不同就可以存在多个,即使名字相同,只要备注不同,又可以存在多个. 那么由于软件自带生成快捷方式的功能,为了避免桌面出 ...
- LeetCode 腾讯精选50题-- 买卖股票的最佳时机 II
贪心算法: 具体的解题思路如下: II 的解题思路可以分为两部分, 1. 找到数组中差值较大的两个元素,计算差值. 2. 再步骤一最大的元素的之后,继续遍历,寻找差值最大的两个元素 可以得出的是,遍历 ...
- MFC基础笔记
List Control // List Control初始化,下面代码需要放在OnInitDialog()函数里面// 设置扩展风格:正行选中 m_list.SetExtendedStyle(LVS ...
- web开发：Bootstrap应用及内存管理
一.栅格系统 二.移动端适配 三.栅格系统案例 四.表格 五.表单 六.循环应用 一.栅格系统 <!DOCTYPE html> <html> <head> < ...
- STM32F407 CAN发送注意事项
STM32使用的baseCAN,使用过程中发现一些注意的事项,特此记录. 现象: CAN发送程序,在1ms以上间隔调用时,一切正常. 当连续调用CAN发送程序4次或更多时,表现为丢数据,仅能发送一条或 ...
- String特性之 “字符串驻留池”
1. 字符串驻留池,就是一块与堆区并行的存放字符串对象的内存区,JVM的驻留池机制规定: 在池中创建一个String对象,第二行会先在池中寻找是否有值与"abc"相同的String ...
- C/C++代码规范
零.前言 笔者最近在看开源代码,看到代码格式各自参差不齐,感觉像是各家各有所长.因此打算写一篇关于C/C++代码规范文章,请各位参考,并践踏批评. 一.文件排版 1. 包含头文件 • 先系统头文件,后 ...
- HandlerMethodArgumentResolver完美解决 springmvc注入参数多传报错
作为一个后端开发,能友好兼容前端参数传入错误等问题,在前端发布不小心多传一个参数导致系统错误的问题,一个广告系统是零容忍的,所以为了不犯错误,后端接收参数必须摒弃spring 的自动注入@Reques ...
- C++-cin与scanf cout与printf效率问题
http://blog.csdn.net/l2580258/article/details/51319387 void cin_read_nosync() { freopen("data.t ...