一，获取元素
- 1， getElementById 获取id （返回获取节点对应对象）
<body>
<h1>我是标题</h1>
<p>我是段落</p>
<ul id="purchases">
<li class="sale">1</li>
<li class="sale important">2</li>
<li>3</li>
</ul>
<script>
alert(typeof document.getElementById("purchases"));
</script>
</body>
* 用typeof操作符来验证类型
- 2，getElementsByTagName 获取每个元素（返回一个对象上数组）
<script>
var shopping = document.getElementById("purchases");
var items = shopping.getElementsByTagName("*");
alert(items.length); //li的长度3
</script>
- 3 ，getElementsByClassName 通过class属性的类名访问元素 (返回相同类名的元素的数字)
<script>
var shopping = document.getElementById("purchases");
var items = shopping.getElementsByClassName("sale");
alert(items.length); //sale的长度2
alert(document.getElementsByClassName("important sale").length);
//important的长度1
</script>
二，获取和设置属性
- 1，getAttribute 获取某个节点的属性值，它只能通过元素节点调用
var paras =document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
alert(paras[i].getAttribute("title"));
}
*//如果p里没有title将会弹出，两个对话框，第二个是null;
//提高脚本可读性
var paras =document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
var title_text = (paras[i].getAttribute("title"));
if(title_text != null){
alert(title_text);
}
}
*现在只弹一次对话框，有title的元素
//进一步提高脚本可读性
var paras =document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
var title_text = (paras[i].getAttribute("title"));
if(title_text){
alert(title_text);
}
}
- 2， setAttribute 允许我们对属性节点的值做出修改
var shopping = document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));
//会弹两次，第一次null ,第二次为 a list of goods
var paras = document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
var title_text =paras[i].getAttribute("title");
if(title_text){
paras[i].setAttribute("title","brand new title text");
alert(paras[i].getAttribute("title"));
}
}
//获取到所有p的title属性值，setAttribute将值改变成brand new title text
- 3 ,childNodes属性 用来获取任何一个元素的所有子元素。
function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
}
//获取body的所有子元素
function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.nodeType);
//结果是1
* 元素节点的nodeType属性值是1.
属性节点的nodeType属性值是2.
文本节点的nodeType属性值是3.
}
- 4，nodetype 可以只对特定类型的节点进行处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript图片库</title>
<link rel="stylesheet" href="layout.css" media="screen"/>
</head>
<body>
<h1>snapshotws</h1>
<ul>
<li>
<a href="image/IMG_5030.JPG" onclick="countBodyChildren(this); return false;" title="A red red rose">rose</a>
</li>
</ul>
<p id="description">Choose an image.</p>
<script>
function countBodyChildren(){
//获取到body
var body_element = document.getElementsByTagName("body")[0];
//所有body的子元素
alert(body_element.childNodes.length);
// alert(body_element.nodeType);
}
</script>
</body>
- 5, nodeValue属性 改变文本节点的值
<body>
<h1>snapshotws</h1>
<ul>
<li>
<a href="image/02.png" onclick ="showPicw(this); return false;" title="A cup of black coffee">coffee</a>
</li>
</ul>
<p id="description">Choose an image.</p>
<script>
function showPicw(whichpic){
//whichpic是点击的那个a
//获取点击的href 保存到source变量
var source = whichpic.getAttribute("href");
//获取imgID保存到placeholder
var placeholder = document.getElementById("placeholder");
//
placeholder.setAttribute("src",source);
//
var text = whichpic.getAttribute("title");
//
var description = document.getElementById("description");
// alert(description.childNodes[0].nodeValue);
description.firstChild.nodeValue=text;
}
</script>
