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')