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)对象的更多相关文章

  1. [Effective JavaScript 笔记]第4章:对象和原型--个人总结

    前言 对象是js中的基本数据结构.对象在js语言编码中也随处可见,比如经常会用到的函数,也是一个Function构造函数,Function.prototype原型对象.每当声明一个函数时,都会继承Fu ...

  2. [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  3. [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

  4. Javascript 笔记与总结(2-4)Javascript 内置对象

    ① String 字符串对象 fromCharCode() 静态方法, 用作为参数而传递的字符代码创建一个新的字符串. length 字符串的长度. charAt() 抽取字符串中指定位置的字符. c ...

  5. [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  6. [Effective JavaScript 笔记]第3章:使用函数--个人总结

    前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...

  7. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  8. 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight

    做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...

  9. jQuery:自学笔记(4)——事件与事件对象

    jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...

  10. JavaScript笔记(第一章,第二章)

    JavaScript笔记(第一章,第二章) 第一章: <meta http-equiv="Content-Type" content="text/html; cha ...

随机推荐

  1. Vim插件安装

    一.常用的插件 sudo apt-get install vim vim-scripts vim-docsudo apt-get install ctagssudo apt-get install v ...

  2. [译]SQL Server 之 索引基础

    SQL Server中,索引以B-tree的结构组织数据.B-tree代表平衡树,但是SQL Server使用一种叫做B+的树. B+树不是总是保持严格的平衡的树. 首先,索引有两个主要的部件:一个页 ...

  3. Oracle数据库表设计时的注意事项

    表是Oracle数据库中最基本的对象之一.万丈高楼从平地起,这个基础对象对于数据库来说,非常重要.因为其设计是否合理,直接跟数据库的性能相关.从Oracle数据库菜鸟到数据库专家这个过程中,在表设计与 ...

  4. String 和 document 的相互转换总结

    转自:http://blog.sina.com.cn/s/blog_7f865faf01014qrs.html 一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转 ...

  5. acm常用术语

    OJ是Online Judge系统的简称,用来在线检测程序源代码的正确性. Accepted (AC) : OK! Your program is correct! Presentation Erro ...

  6. C/C++函数使用

    1 memset 将s所指向的某一块内存中的前n个 字节的内容全部设置为ch指定的ASCII值, 块的大小由第三个参数指定,这个函数通常为新申请的内存做初始化工作, 其返回值为指向s的指针. 函数介绍 ...

  7. HttpSession--会话

  8. 浅析C#中的Attribute(转)

    最近用到了,所以静下心来找些资料看了一下,终于把这东西搞清楚了. 一.什么是Attribute 先看下面的三段代码: 1.自定义Attribute类:VersionAttribute [Attribu ...

  9. F Takio与Blue的人生赢家之战

    Time Limit:1000MS  Memory Limit:65535K 题型: 编程题   语言: 无限制 描述 在那个风起云涌的SCAU ACM里,有两位人生赢家,他们分别是大洲Takio神和 ...

  10. JAVA定时执行任务,每天定时几点钟执行任务

    JAVA定时执行任务,每天定时几点钟执行任务的示例如下: 1.建立TimerManage类,设置时间点,时间点设置的管理类,代码如下: package com.pcitc.time; import j ...