javascript DOM编程艺术笔记——CH3 DOM

Cha3. DOM

D is for document

The DOM can’t work without a document. When you create a web page and load it in a web browser, the DOM comes to life. It takes the document that you have written and turns it into an object.

Objects

objects are bundles of data.

Variables associated with an object are called properties of the object.

Functions that can be executed by an object are called methods of the object.

M for model

The DOM represents the web page that’s currently loaded in the browser window. The browser

provides model of the page by node tree.

node

element node(rectangle)

text nodes(rounded rectangle)

attribute nodes (circle)

css

class

<p class="special">This paragraph has the special class</p>
<h2 class="special">So does this headline</h2>

.special {
font-style: italic;
}

h2.special {
text-transform: uppercase;
}

id

<ul id="purchases">

#purchases {
border: 1px solid white;
background-color: #333;
color: #ccc;
padding: 1em;
}

methods

Five very handy DOM methods: getElementById, getElementsByTagName,

getElementsByClassName, getAttribute, and setAttribute

getElementById

<p id = "go"> haha </p>
<script>
var a =document.getElementById("go");
alert(typeof(a));
</script>

getElementsByTagName

get an array of the specific tag

notice that it can only get the

var items = document.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
alert(typeof items[i]);
}

getElementsByClassName

document.getElementsByClassName("shoes");
document.getElementsByClassName("shoes cool");//element that has classes shoes **and** cool

getAttribute&setAttribute

getAttribute

var items = document.getElementsByTagName("p");
for(var i=0;i<items.length;i++){
var title_text =items[i].getAttribute("title");
if(title)
alert(items[i].getAttribute("title"));
}

setAttribute

var shopping = document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");