HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

获取节点

getElementById:通过id取到的唯一节点。
getElementsByName() ：通过name属性
getElementsByTagName() ：通过标签名
getElementsByClassName() ：通过class名

后面三个getElements取到的是数组格式，不能直接添加各种属性，而应该取出数组的每一个单独动作。
例如：getElementsByName（“Name1”）[0].onclick=function

1.在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

例

                  <!DOCTYPE html>

                  <html>

                  <body>

                  <script>

                  document.write(Date());

                  </script>

                  </body>

                  </html>

2.如需改变 HTML 元素的内容使用document.getElementById(id).innerHTML=new HTM

            <html>

            <body>

            <p id="p1">Hello World!</p>

            <script>

            document.getElementById("p1").innerHTML="New text!";

            </script>

            </body>

            </html>

 



3.改变 HTML 元素的属性使用document.getElementById(id).attribute=new value


          <!DOCTYPE html>

         html>

         <body>

         <img id="image" src="smiley.gif">

         <script>

         document.getElementById("image").src="landscape.jpg";

         </script>

         </body>

         </html>




4. HTML DOM 允许 JavaScript 改变 HTML 元素的样式。


                     document.getElementById(id).style.property=new style


1、查看属性节点，getAttribute("属性名")；
			  2、设置属性节点：setAttribute（"属性名"，"新属性值"）


DOM事件：



 onclick 点击


 onload 和 onunload 事件会在用户进入或离开页面时被触发。


onchange 事件常结合对输入字段的验证来使用


onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数


点击鼠标按钮时，会触发 onmousedown 事件


当释放鼠标按钮时，会触发 onmouseup 事件


onfocus获得焦点时
												


											
JavaScript 的使用基础总结②DOM的更多相关文章
	

    
								
  1. 第一百一十三节，JavaScript文档对象，DOM基础
		
    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
    
		
    2. 
						
  2. 从头开始学JavaScript 笔记(一)——基础中的基础
		
    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...
    
		
    3. 
						
  3. 第一百一十四节，JavaScript文档对象，DOM进阶
		
    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
    
		
    4. 
						
  4. 前端基础之DOM和BOM
		
    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...
    
		
    5. 
						
  5. 进击的Python【第十五章】：Web前端基础之DOM
		
    进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
    
		
    6. 
						
  6. php面试专题---12、JavaScript和jQuery基础考点
		
    php面试专题---12.JavaScript和jQuery基础考点 一.总结 一句话总结: 比较常考察的是JavaScript的HTML样式操作以及jQuery的选择器和事件.样式操作. 1.下列不 ...
    
		
    7. 
						
  7. 100多个很有用的JavaScript函数以及基础写法大集合
		
    100多个很有用的JavaScript函数以及基础写法大集合 1.document.write("");为 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:docume ...
    
		
    8. 
						
  8. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
		
    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
    
		
    9. 
						
  9. 《高性能javascript》 领悟随笔之-------DOM编程篇
		
    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 命令控制台与java环境配置
			
    1. 命令控制台 1) Linux / Unix 命令格式  command [-选项...] [参数...]  如:  ls -a ~      mkdir .demo  //创建隐藏目录      ...
    
			
    2. 
						
  2. 如何两周达到150行Java程序的能力--part 1
			
    面向对象程序先导课是体系化面向对象课程的重要组成部分,其目标是帮助那些有一定C语言基础,但对面向对象概念陌生,基本没碰过Java编程的同学.该课程设计为暑期选修课,因为没有其他课程,我们设计为现场训练 ...
    
			
    3. 
						
  3. Linux - 简明Shell编程12 - 定制输出（ColorOutput）
			
    脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash echo -e "\ ...
    
			
    4. 
						
  4. 《Python学习手册》读书笔记【转载】
			
    转载:http://www.cnblogs.com/wuyuegb2312/archive/2013/02/26/2910908.html 之前为了编写一个svm分词的程序而简单学了下Python,觉 ...
    
			
    5. 
						
  5. 【LeetCode】数组-4(581)-给未排序数组中子数组排序使得整个数组排序 找到这个最小的子数组
			
    这道题目感觉并不太容易,也并没有想到什么比较好的方法,看来还是积累太少. 思路一:两个指针向后遍历,分别记下造成逆序的最小和最大下标位置 优化的暴力解法(很精妙,面试的时候可以说出来) 思想:两个指针 ...
    
			
    6. 
						
  6. css复习内容
			
    有时候 自己动手写一遍比想十遍都有用 <!DOCTYPE html><html> <head> <meta charset="utf-8" ...
    
			
    7. 
						
  7. noip提高组2011 Mayan游戏
			
    Mayan游戏 描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个7行5列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.**游戏通关 ...
    
			
    8. 
						
  8. js通过添加随机数的方法，解决多张图片加载时由于缓存导致图片无法正确显示的问题
			
    问题出现描述:当对列表中某个图片进行重新编辑时,提交后会发现图片列表仍会出现修改之前的图片,新图片并未覆盖. 问题出现原因:缓存问题. 解决办法:通过js方法,在每张图片路劲后面添加一个随机数,这样每 ...
    
			
    9. 
						
  9. How to make a simplest WCF service work on Win7 with VS2010
			
    You know as a beginner to learn WCF, the first thing is to make a simplest WCF service work like a c ...
    
			
    10. 
						
  10. Linux桌面环境GNOME实用技巧
			
    GNOME是Linux桌面上主流的集成桌面环境之一,GNOME桌面以其风格简洁.操作便捷而受到Linux用户的欢迎.这里将介绍Linux桌面环境GNOME的操作技巧,在这里拿出来和大家分享一下. 下面 ...
    
			
    11.