Javascript 笔记与总结(2-7)对象
html:
<h1>找对象</h1>
<div id="div1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div class="div2"></div>
<input type="text" name="username" value="uname">
js:
① Id
console.log(document.getElementById("div1"));
输出:
<div id="div1">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
类型是 [object HTMLDivElement]
② TagName
console.log(document.getElementsByTagName("p"));
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByTagName("h1"));
输出:
[p, p, p, item: function, namedItem: function]
0: p
1: p
2: p
length: 3
__proto__: HTMLCollection
类型是 [object HTMLCollection] 对象集合
3
[h1, item: function, namedItem: function]
0: h1
length: 1
__proto__: HTMLCollection
操作集合中的某个元素:
var ps = document.getElementsByTagName("p");
ps[1].style.background = 'blue';
③ 表单元素 Name
console.log(document.getElementsByName("username"));
输出:
[input, item: function]
0: input
length: 1
__proto__: NodeList
类型 [object NodeList] 节点列表
读取其中一个表单元素的 value
var username = document.getElementsByName("username");
console.log(username[0].value);
输出:
uname
操作其中一个表单元素的 value
username[0].value = 'dee';
或者直接
document.getElementsByName("username")[0].value = "dee";
④ ClassName (ie6/ie7/ie8 的 document 对象是没有 getElementByClassName 这个属性的)
console.log(document.getElementsByClassName("div2"));
输出:
[div.div2, item: function, namedItem: function]
0: div.div2
length: 1
__proto__: HTMLCollection
类型 [object HTMLCollection]
⑤ 找子对象 / 父对象 children / parent(可在 W3C 手册中查找)
console.log(document.getElementById("div1").childNodes);
输出:
[text, p, text, p, text, p, text, item: function]
0: text
1: p
2: text
3: p
4: text
5: p
6: text
length: 7
__proto__: NodeList
在 DOM 中,一个注释、一个换行、一个空格都看成是一个节点
另外,除了 childNodes 外,children 也可以用来表示子节点(并不是 W3C 的规范,但是各个浏览器都支持),使用 children 属性时,例如上例遍历 #div1 的子节点时,会自动过滤例如换行、空白等 空白节点
console.log(document.getElementById("div1").children);
输出:
[p, p, p, item: function, namedItem: function]
0: p
1: p
2: p
length: 3
__proto__: HTMLCollection
父节点
console.log(document.getElementsByTagName("p")[0].parentNode);
输出:
<div id="div1">
<p>p1</p>
<p style="background: blue;">p2</p>
<p>p3</p>
</div>
也可以操作父节点的属性
document.getElementsByTagName("p")[0].parentNode.style.border = '1px solid #eee')
Javascript 笔记与总结(2-7)对象的更多相关文章
- [Effective JavaScript 笔记]第4章:对象和原型--个人总结
前言 对象是js中的基本数据结构.对象在js语言编码中也随处可见,比如经常会用到的函数,也是一个Function构造函数,Function.prototype原型对象.每当声明一个函数时,都会继承Fu ...
- [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- Javascript 笔记与总结(2-4)Javascript 内置对象
① String 字符串对象 fromCharCode() 静态方法, 用作为参数而传递的字符代码创建一个新的字符串. length 字符串的长度. charAt() 抽取字符串中指定位置的字符. c ...
- [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记]第3章:使用函数--个人总结
前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...
- 从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成 javascript ECMASc ...
- 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight
做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...
- jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
- JavaScript笔记(第一章,第二章)
JavaScript笔记(第一章,第二章) 第一章: <meta http-equiv="Content-Type" content="text/html; cha ...
随机推荐
- Vim插件安装
一.常用的插件 sudo apt-get install vim vim-scripts vim-docsudo apt-get install ctagssudo apt-get install v ...
- [译]SQL Server 之 索引基础
SQL Server中,索引以B-tree的结构组织数据.B-tree代表平衡树,但是SQL Server使用一种叫做B+的树. B+树不是总是保持严格的平衡的树. 首先,索引有两个主要的部件:一个页 ...
- Oracle数据库表设计时的注意事项
表是Oracle数据库中最基本的对象之一.万丈高楼从平地起,这个基础对象对于数据库来说,非常重要.因为其设计是否合理,直接跟数据库的性能相关.从Oracle数据库菜鸟到数据库专家这个过程中,在表设计与 ...
- String 和 document 的相互转换总结
转自:http://blog.sina.com.cn/s/blog_7f865faf01014qrs.html 一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转 ...
- acm常用术语
OJ是Online Judge系统的简称,用来在线检测程序源代码的正确性. Accepted (AC) : OK! Your program is correct! Presentation Erro ...
- C/C++函数使用
1 memset 将s所指向的某一块内存中的前n个 字节的内容全部设置为ch指定的ASCII值, 块的大小由第三个参数指定,这个函数通常为新申请的内存做初始化工作, 其返回值为指向s的指针. 函数介绍 ...
- HttpSession--会话
- 浅析C#中的Attribute(转)
最近用到了,所以静下心来找些资料看了一下,终于把这东西搞清楚了. 一.什么是Attribute 先看下面的三段代码: 1.自定义Attribute类:VersionAttribute [Attribu ...
- F Takio与Blue的人生赢家之战
Time Limit:1000MS Memory Limit:65535K 题型: 编程题 语言: 无限制 描述 在那个风起云涌的SCAU ACM里,有两位人生赢家,他们分别是大洲Takio神和 ...
- JAVA定时执行任务,每天定时几点钟执行任务
JAVA定时执行任务,每天定时几点钟执行任务的示例如下: 1.建立TimerManage类,设置时间点,时间点设置的管理类,代码如下: package com.pcitc.time; import j ...