浅尝JavaScript document对象
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对象的更多相关文章
- javaScript document对象详解
Document对象内容集合 document 文挡对象 - JavaScript脚本语言描述———————————————————————注:页面上元素name属性和JavaScript引用的名称必 ...
- javascript document对象 第21节
<html> <head> <title>DOM对象</title> <style type="text/css"> t ...
- 详解JavaScript Document对象
转自:http://segmentfault.com/a/1190000000660947 在浏览器中,与用户进行数据交换都是通过客户端的javascript代码来实现的,而完成这些交互工作大多数是d ...
- JavaScript document对象
1.document对象是window对象的子对象,可直接使用,多用于获取HTML页面元素 2.document对象属性 a) alinkColor活动链接颜色 b) linkColor文本链接颜色 ...
- 浅谈JavaScript原型对象与相关设计模式
引言 本文先从介绍JavaScript中基本的几种设计模式开始,最后引出原型对象,然后对原型对象有一个较全面的介绍. 1.创建对象的几种设计模式 A.工厂模式 我们知道在JavaScript中创建对象 ...
- 14 JavaScript Window对象
Window对象表示一个浏览器窗口或者一个框架. 在客户端JavaScript中,window对象是全局对象,所有的表达式都在当前的环境中计算. Window对象的子对象: JavaScript do ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- 【温故而知新-Javascript】使用 Document 对象
Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...
- javascript之document对象
一.修改网页元素 当使用document提供的方法和Element的属性得到网页元素之后,就可以对元素的内容进行修改,如下例所示的“全选/全不选”的实现. 例3-17 <html> < ...
随机推荐
- 【算法系列学习】Dijkstra算法变形 [kuangbin带你飞]专题四 最短路练习
https://vjudge.net/contest/66569#problem/B 类试题:noip2013 货物运输 POJ 1797 Heavy Transportation 方法一:Dijks ...
- PHP学习笔记-2
PHP 是一门弱类型语言: 在上面的实例中,我们注意到,不必向 PHP 声明该变量的数据类型.(跟Javascript很像啊!) PHP 会根据变量的值,自动把变量转换为正确的数据类型. 在强类型的编 ...
- poj2502最短路！
have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of getting to ride ...
- C#基础之------委托
一.委托的基本介绍 可以任务委托是持有一个或多个方法的对象.当然,正常情况下你不会去执行一个对象,但是委托与对象不同.可以执行委托,这是委托就会执行他所"持有"的方法. 举个栗子就 ...
- OC中的私有变量和私有方法
在类的实现即.m文件中也可以声明成员变量,但是因为在其他文件中通常都只是包含头文件而不会包含实现文件,所以在.m文件中声明的成员变量是@private得.在 .m中定义的成员变量不能和它的头文件.h中 ...
- GitHub 常用命令使用介绍（新同学入门）
经济在不断发展,社会在不断进步,以往的互联网在现在看来都可以称为传统互联网了,因为技术不断的在突破和革新. 本文主要介绍一下版本管理工具,我猜测很多人还是用SVN.CVS或者Resion,但是,今天我 ...
- Excel表格导入Mysql数据库，一行存入多条数据的前后台完整实现思路（使用mybatis框架）
现在有一张Excel表格: 存入数据库时需要这样存放: 现在需要将Excel表格做处理,将每一行拆分成多条数据存入数据库. 1.首先在前台jsp页面画一个按钮:,加入点击事件: <td styl ...
- 关于Ubuntu的ssh免密登录
1.打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码"--> ...
- Spring3.0配置多个事务管理器（即操作多个数据源）的方法
大多数项目只需要一个事务管理器.然而,有些项目为了提高效率.或者有多个完全不同又不相干的数据源,最好用多个事务管理器.机智的Spring的Transactional管理已经考虑到了这一点,首先分别定义 ...
- WebSocket实战
前言 互联网发展到现在,早已超越了原始的初衷,人类从来没有像现在这样依赖过他:也正是这种依赖,促进了互联网技术的飞速发展.而终端设备的创新与发展,更加速了互联网的进化: HTTP/1.1规范发布于19 ...