document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

<body>

<div id="h">

<div></div>

<span></span>

</div>

<div id="l"></div>

<div class="haha"></div>

<div class="haha"></div>

<span class="haha"></span>

<input type="text" name="dada" />

</body>

<script>

 //var a=document.getElementById("l");

//a.childNodes

//alert(a.previousSibling) 找到同级

/*alert(a.childNodes[5]);*///找子节点的时候的时候除了找标签还会找空格

/*alert(a.firstChild)*///返回文档的首个子节点

/*alert(a.parentNode)*///找到该元素的父级元素

/*alert(a)*///找到的只有一个

/*var b=document.getElementsByClassName("haha");//找到的是多个,返回一个数组

alert(b[2]);*/

/*var c=document.getElementsByTagName("div")//根据标签名找，找到的是多个,返回一个数组

alert(c[0])

/*var d=document.getElementsByName("dada")

alert(d[0])根据name找，可以找到多个，返回数组，主要针对表单元素。*/








操作样式

var a=document.getElementById("h")

a.style.backgroundColor="red"

alert(a.style.backgroundColor)

a.style.width=""   属性值为空的时候就是删除了样式

<div id="aaa">

<span>hahaha</span>

</div>

</body>

<script>

//document整个文档

//控制元素

//var a=document.getElementById("aaa")

/*a.remove()*/;     //移除元素，移除只是在浏览器显示页面移除了。

//var bb=document.createElement("span")

//a.appendChild(bb)    //追加子元素

//操作元素

//var a=document.getElementById("aaa");

/*alert(a.innerText) */                       //innerText      取元素中的文本内容

a.innerText="world"               //给元素赋文本值

//alert(a.innerHTML)          //区元素的HTML代码内容

//a.innerHTML=""                   //给元素放一个HTML代码

表单元素

/*var a=document.getElementById()

a.value="yonghuming";//给元素赋值

alert(a.value);*///取值 

操作属性

var a=document.getElementById("aaa");

a.setAttribute("bs","100")  ////给标签加属性、属性

a.getAttribute("bs")   //获取属性值

a.removeAttribute("bs")  // 移除属性

/*var a=document.getElementById("aaa");

a.setAttribute("bs","200");*/

//alert(a.getAttribute("bs"));





　　


/*鼠标事件
onclick 鼠标单击触发
ondblclick 鼠标双击触发
onmouseover 鼠标移上去触发
onmouseour 鼠标离开触发
onmousemove 鼠标移动触发*/


/*键盘事件：
onkeydown 键盘按下触发
onkeyup 按键抬起触发
onkeypress 按键触发*/


/*表单元素事件
onfocus  获得焦点出发
onblur 失去焦点触发
onchange 内容改变的时候触发
*/
//JS不支持统一加事件，但是可以通过循环加事件
												


											
浅尝JavaScript document对象的更多相关文章
	

    
								
  1. javaScript document对象详解
		
    Document对象内容集合 document 文挡对象 - JavaScript脚本语言描述———————————————————————注:页面上元素name属性和JavaScript引用的名称必 ...
    
		
    2. 
						
  2. javascript document对象 第21节
		
    <html> <head> <title>DOM对象</title> <style type="text/css"> t ...
    
		
    3. 
						
  3. 详解JavaScript Document对象
		
    转自:http://segmentfault.com/a/1190000000660947 在浏览器中,与用户进行数据交换都是通过客户端的javascript代码来实现的,而完成这些交互工作大多数是d ...
    
		
    4. 
						
  4. JavaScript  document对象
		
    1.document对象是window对象的子对象,可直接使用,多用于获取HTML页面元素 2.document对象属性 a) alinkColor活动链接颜色 b) linkColor文本链接颜色  ...
    
		
    5. 
						
  5. 浅谈JavaScript原型对象与相关设计模式
		
    引言 本文先从介绍JavaScript中基本的几种设计模式开始,最后引出原型对象,然后对原型对象有一个较全面的介绍. 1.创建对象的几种设计模式 A.工厂模式 我们知道在JavaScript中创建对象 ...
    
		
    6. 
						
  6. 14 JavaScript Window对象
		
    Window对象表示一个浏览器窗口或者一个框架. 在客户端JavaScript中,window对象是全局对象,所有的表达式都在当前的环境中计算. Window对象的子对象: JavaScript do ...
    
		
    7. 
						
  7. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
		
    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
    
		
    8. 
						
  8. 【温故而知新-Javascript】使用 Document 对象
		
    Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...
    
		
    9. 
						
  9. javascript之document对象
		
    一.修改网页元素 当使用document提供的方法和Element的属性得到网页元素之后,就可以对元素的内容进行修改,如下例所示的“全选/全不选”的实现. 例3-17 <html> < ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【WPF】学习笔记（二）——依旧是一个电子签名板
			
    这篇博客呢,主要谈谈在实现电子签名功能中踩过的几个坑:1.System.BadImageFormatException异常:2.无法加载DLL“###.dll”,: 找不到指定的模块. (异常来自 H ...
    
			
    2. 
						
  2. HTML5 拖放（Drag 和 Drop）功能开发——浅谈dataTransfer对象
			
    [前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一 ...
    
			
    3. 
						
  3. OC中Foundation框架
			
    框架的概念 框架是由许多类.方法.函数.文档按照一定的逻辑组织起来的组合,以便使研发程序变的更容易在OS X下地Mac操作系统中大约有80个框架为所有程序开发奠定基础的框架称为Foundation框架 ...
    
			
    4. 
						
  4. python 小程序—循环和列表训练
			
    a=input('please input your salary:') purchase=[] while True: products=[[1,'iphone',5800],[2,'book',5 ...
    
			
    5. 
						
  5. js原型链部分详细使用说明案例
			
    1. 'index.html'文件 ```html <!DOCTYPE html> <html lang="en"> <head> <me ...
    
			
    6. 
						
  6. GPIO控制LED
			
    一.LED灯的亮灭控制的配置步骤(GPIO4_D3): 1.GPIO4的CRU_CLKGATE_CON31时钟使能配置(用来保证GPIO4可写): io -4 0xff76037c 0xffff019 ...
    
			
    7. 
						
  7. Vue.js 实战总结
			
    最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
    
			
    8. 
						
  8. Java过滤敏感词语/词汇---DFA算法
			
    最近网站需要在评论.投稿等地方过滤敏感词汇,于是在网上查找了相关教程,特此整理分享. 关于DFA算法,详细的可以去http://blog.csdn.net/u013378306/article/det ...
    
			
    9. 
						
  9. textView布局的一点体会
			
    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
    
			
    10. 
						
  10. ListView的使用（二）长按弹出上下文菜单
			
    public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView ...
    
			
    11.