浅尝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> < ...
随机推荐
- 当谈 SQL 优化时谈些什么？
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:孙银行 背景 Mysql数据库作为数据持久化的存储系统,在实际业务中应用广泛.在应用也经常会因为SQL遇 ...
- Web 版 powerdesigner (Canvas) 技术分享
演示地址:http://www.netuml.com:8088 <canvas></canvas>是HTML5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事 ...
- vue2.0 组件通信
组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...
- [刷题]算法竞赛入门经典(第2版) 4-6/UVa508 - Morse Mismatches
书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,10 ms) //UVa508 - Morse Mismatches #include< ...
- 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装
接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...
- java线程总结3--synchronized关键字，原理以及相关的锁
在多线程编程中,synchronized关键字非常常见,当我们需要进行"同步"操作时,我们很多时候需要该该关键字对代码块或者方法进行锁定.被synchronized锁定的代码块,只 ...
- 关于TOE(TCP/IP Offload Engine)
前言 昨天在电脑上抓取的报文,想进行回话,但是发现全部被设备丢弃了,没有debug信息,查看了抓包文件,原来是IP头和TCP.UDP头的检验和全部为0,也就是TOE(TCP/IP Offload En ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- Android 开发—— 小工具，大效率
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:姚志锋 一.Hugo插件 -- 打印方法运行时间 首先申明下,此Hugo非 彼Hugo(Hugo是由Go ...
- UITextView 实现链接点击事件
UILabel通过富文本可以实现图文混排,但是想要实现文字的点击效果好像不容易实现,这里有2种方法可以达到效果 YYLabel -->YYText框架 参考我之前的博客:http://www.c ...