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. Vue2.x中的父组件数据传递至子组件
			
    父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...
    
			
    2. 
						
  2. TCP/IP协议精华笔记
			
    1.简介 TCP/IP协议并非单指TCP协议.IP协议,它是一组包括TCP协议和IP协议,UDP(User Datagram Protocol)协议.ICMP(Internet Control Mes ...
    
			
    3. 
						
  3. JavaEE开发之SpringBoot整合MyBatis以及Thymeleaf模板引擎
			
    上篇博客我们聊了<JavaEE开发之SpringBoot工程的创建.运行与配置>,从上篇博客的内容我们不难看出SpringBoot的便捷.本篇博客我们继续在上篇博客的基础上来看一下Spri ...
    
			
    4. 
						
  4. IOS中的通知NSNotification
			
    类似于Android中的广播接收者发送者 1.一般完整的通知包含三个属性 -(NSString *)name ;//通知的名称 -(id)object ;//通知发布者(是谁要发布通知) -(NSDi ...
    
			
    5. 
						
  5. description方法的介绍及重写
			
    Dog *d = [Dog new]; //查看对象地址 NSLog(@"\n d= %p ",d);//打印的为地址 例:0x1001002e0 //查看对象实例变量的值 NSL ...
    
			
    6. 
						
  6. Linux图形界面与字符界面切换
			
    1. 启动时进入字符界面,后来想切换到图形界面:使用startx 或 init 5 (注:startx只是在原有运行级别3上加了图形界面,运行级别没变,而init 5 则是切换到运行级别5,所以要重新 ...
    
			
    7. 
						
  7. gcc编译
			
    一个C/C++文件要经过预处理.编译.汇编和连接等4步才能变成可执行文件:     (1)以#开头的命令被统称为预处理,比如"#include",宏定义命令"#defin ...
    
			
    8. 
						
  8. c# 对加密的MP4文件进行解密
			
    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
    
			
    9. 
						
  9. 面试(1)-java-se-字符串
			
    http://blog.csdn.net/zhangerqing/article/details/8093919 hashCode和identityHashCode的区别 I. hashCode()方 ...
    
			
    10. 
						
  10. 用sftp上传文件至linux服务器
			
    1.项目环境 框架:springmvc    项目管理工具:maven 2.必须使用的jar com.jcraft jsch 0.1.27 test 3.新建一个FileUpDown工具类,在类中添加 ...
    
			
    11.