浅尝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> < ...
随机推荐
- JQuery实现通过点击标题切换字体
这个主要通过判断被点击的元素的子元素中是否包含了b元素来进行字体的切换,其中wrapInner函数是为了在$author元素的内部添加b标签. 切换回正常字体是通过将内容转化为纯文本形式,再替换元素内 ...
- windows下安装Redis并部署成服务
windows下安装Redis并部署成服务 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 一:下载 下载地址: windows版本: http ...
- hadoop集群搭建--CentOS部署Hadoop服务
在了解了Hadoop的相关知识后,接下来就是Hadoop环境的搭建,搭建Hadoop环境是正式学习大数据的开始,接下来就开始搭建环境!我们用到环境为:VMware 12+CentOS6.4 hadoo ...
- MongoDB大数据高并发读写性能测试报告
服务器大小: 单节点部署,磁盘1T,内存128G 并发导入规模: 1,多线程并发导入csv文件 2,csv文件分1万.10万.100万.200万行记录4种大小 3,每个csv对应一个collectio ...
- 搭建本地git仓库
使用工具:git|码云 步骤: 注册码云账号,创建项目名称等. 本地git配置 本地文件目录:git init(初始化创建分支master) 基础配置:git config --global user ...
- Android RoboGuice 使用指南
1.概述 在开发应用时一个基本原则是模块化,并且近最大可能性地降低模块之间的耦合性.在Java平台上Spring Framework 以及.Net 平台 CAB ,SCSF 和Prism (WPF,S ...
- 学习笔记：HTML+CSS 基础知识
1.<q>标签,短文本引用 <q>引用文本</q> <q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行 ...
- [刷题]算法竞赛入门经典(第2版) 5-13/UVa822 - Queue and A
题意:模拟客服MM,一共有N种话题,每个客服MM支持处理其中的i个(i < N),处理的话题还有优先级.为了简化流程方便出题,设每个话题都是每隔m分钟来咨询一次.现知道每个话题前来咨询的时间.间 ...
- 点击文字选中checkbox
<html> <head> <title>test</title> <meta http-equiv="content-Type&quo ...
- windows上安装jdk
1.下载jdk安装包 jdk官网 http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.安装jdk 傻瓜式下一步 ...