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. js判断字符串是否全为空(使用trim函数/正则表达式)
			
    我们需要判断用户输入的是否全是空格,可以使用以下方法: 方法一: 使用trim() /* 使用String.trim()函数,来判断字符串是否全为空*/ function kongge1(test)  ...
    
			
    2. 
						
  2. TypeScript入门-高级类型
			
    高级类型 交叉类型 交叉类型,就是将多个类型合并为一个新的类型,这个新的类型具有这多个类型的成员,含有这几个类型的所有特性,是他们的综合体,像是集合的并集 例子: function extend< ...
    
			
    3. 
						
  3. Python学习之路-Day2-Python基础3
			
    Python学习之路第三天 学习内容: 1.文件操作 2.字符转编码操作 3.函数介绍 4.递归 5.函数式编程 1.文件操作 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个 ...
    
			
    4. 
						
  4. C# Webclient 和 Httpclient如何通过iis authentication 身份验证。
			
    前言: 该博客产生的背景是客户那边有部署网站的方法是iis windows authentication身份验证,而系统中使用Webclient来调用别的系统的方法.在此情况下,原本可以使用的功能,都 ...
    
			
    5. 
						
  5. 2.从AbstractQueuedSynchronizer(AQS)说起(1)——独占模式的锁获取与释放
			
    首先我们从java.util.concurrent.locks包中的AbstraceQueuedSynchronizer说起,在下文中称为AQS. AQS是一个用于构建锁和同步器的框架.例如在并发包中 ...
    
			
    6. 
						
  6. Ubuntu 完全卸载MySQL 重装步骤
			
    sudo rm /var/lib/mysql/ -R 删除mysql的数据文件   sudo rm /etc/mysql/ -R 删除mqsql的配置文件   sudo apt-get autorem ...
    
			
    7. 
						
  7. Android利用文本分割拼接开发一个花藤文字生成
			
    今天研究了一个小软件,挺有意思的,尽管网上已经很多那种软件,但是今天还是在这里给大家分享一下这个软件的具体开发过程 首先,这个软件只需要三个主要控件,EditText.Button以及TextView ...
    
			
    8. 
						
  8. 浏览器兼容性--new Date
			
    ie浏览器下new Date("2013/04")与new Date("2016-04")会报错: //将201601格式的字符串转为Date对象,月份从0开始 ...
    
			
    9. 
						
  9. 面试(2)-java-se-HashSet和TreeSet
			
    Set是java中一个不包含重复元素的collection.更正式地说,set 不包含满足 e1.equals(e2) 的元素对 e1 和 e2,并且最多包含一个 null 元素.正如其名称所暗示的, ...
    
			
    10. 
						
  10. Calendar使用
			
    1简单例子 package com.kungeek.tip; import java.text.SimpleDateFormat; import java.util.Calendar; import  ...
    
			
    11.