DOM(document object model):
1. Direct accessible dom element objects:
1.document.documentElement
2.document.head
3.document.title
4.document.body
html, body, title and head Tags
<body> <h1>linux is very much!</h1> <h1>js is very much!</h1> <h1>html5 is very much!</h1> </body> <script> //html tag document.documentElement.style.background='#00f'; //body label document.body.style.background='#f00'; //title Tag document.title='A Duan'; //head tag alert(document.head.outerHTML); </script>
2. Method of obtaining element object:
1.document.getElementById()# Returns an element object (dom object)
2.document.getElementsByTagName()# Returns a collection object
3.document.getElementsByClassName()# Returns a collection object
4.document.getElementsByName()# Returns a list of nodes (nodelist)
getElementById gets element objects by id
<body>
<h1 id='hid'>linux is very much!</h1>
<h1>js is very much!</h1>
<h1>html5 is very much!</h1>
</body>
<script>
//Getting tag objects by id
hidobj=document.getElementById('hid');
hidobj.onclick=function(){
this.style.background='#888';
}
</script>
getElementsByClassName obtains element objects by class names
<body>
<h1 class='abc'>linux is very much!</h1>
<h1 class='abc'>js is very much!</h1>
<h1 class='abc'>html5 is very much!</h1>
</body>
<script>
//Getting html objects by tag names
objs=document.getElementsByClassName('abc');
//Traversing Collection Objects
for(i=0;i<objs.length;i++){
objs[i].style.background='#0f0';
}
</script>
getElementsByTagName retrieves element objects by tag name
<body>
<h1>linux is very much!</h1>
<h1>js is very much!</h1>
<h1>html5 is very much!</h1>
</body>
<script>
//Getting html objects by tag names
objs=document.getElementsByTagName('h1');
//Returns collection objects (same as arrays)
alert(objs.length);
</script>
getElementsByName retrieves the element object through the name attribute of the tag
<body>
<h2>User login:</h2>
<form action="go.php" method='post' id='fid'>
<p>User name:</p>
<p><input type="text" name='username'></p>
<p>Password:</p>
<p><input type="text" name='password'></p>
<p>
<input type="submit" value="ok">
</p>
</form>
</body>
<script>
//Getting html objects by name
usernameobj=document.getElementsByName('username');
usernameobj[0].onfocus=function(){
this.style.outlineColor='#f00';
}
</script>
3. Element Object Standard Attributes:
1.obj.id;
2.obj.className;
3.obj.style;
4.obj.title;
Old methods set and acquire standard attributes
<body>
<h2>User login:</h2>
<form action="go.php" class='abc' method='post' id='fid' sex='nv' age='20'>
<p>User name:</p>
<p><input type="text" name='username'></p>
<p>Password:</p>
<p><input type="text" name='password'></p>
<p>
<input type="submit" value="ok">
</p>
</form>
</body>
<script>
fidobj=document.getElementById('fid');
//set a property
fidobj.id='formid';
//Get attribute values
alert(fidobj.id);
</script>
**
**
4. Non-standard attributes of element objects: (undefined)
1.obj.username;
2.obj.age;
3.obj.sex;
**
**
**
5. A unified approach to acquire standard or non-standard attributes:
1. Acquisition
fidobj.getAttribute('age');
2. Settings
fidobj.setAttribute('age','20');
A Unified Method for Getting Standard or Non-Standard Attributes by getAttribute
<body>
<h2>User login:</h2>
<form action="go.php" class='abc' method='post' id='fid' sex='nv' age='20'>
<p>User name:</p>
<p><input type="text" name='username'></p>
<p>Password:</p>
<p><input type="text" name='password'></p>
<p>
<input type="submit" value="ok">
</p>
</form>
</body>
<script>
fidobj=document.getElementById('fid');
//A Unified Method for Obtaining Standard or Non-Standard Attributes
s=fidobj.getAttribute('action');
</script>
A Unified Method for setAttribute Setting Standard or Non-Standard Attributes
<body>
<h2>User login:</h2>
<form action="go.php" class='abc' method='post' id='fid' sex='nv' age='20'>
<p>User name:</p>
<p><input type="text" name='username'></p>
<p>Password:</p>
<p><input type="text" name='password'></p>
<p>
<input type="submit" value="ok">
</p>
</form>
</body>
<script>
fidobj=document.getElementById('fid');
//A Unified Method for Setting Standard or Non-Standard Attributes
fidobj.setAttribute('age','2000');
//A Unified Method for Obtaining Standard or Non-Standard Attributes
s=fidobj.getAttribute('age');
alert(s);
</script>
**
6. Element object js attribute:
1.obj.tagName;
2.obj.innerHTML;
3.obj.outerHTML;
4.obj.textContent;
innerHTML captures and sets the values inside the tag
<body>
<h1 id='hid'>A Dumb is giggling. The reason is not clear. Maybe the laughing point is too low.!</h1>
</body>
<script>
hidobj=document.getElementById('hid');
//Set the value inside the label
hidobj.innerHTML='The side dish is too bad.!';
//Get the value inside the label
alert(hidobj.innerHTML);
</script>
outerHTML Gets the Value Outside the Label
<body>
<h1 id='hid'>A Dumb is giggling. The reason is not clear. Maybe the laughing point is too low.!</h1>
</body>
<script>
hidobj=document.getElementById('hid');
//Get the value outside the label
alert(hidobj.outerHTML);
</script>
tagName gets the tag name
<body>
<h1 id='hid'>A Dumb is giggling. The reason is not clear. Maybe the laughing point is too low.!</h1>
</body>
<script>
hidobj=document.getElementById('hid');
//Get the value outside the label
alert(hidobj.tagName);
</script>
Text Content Label Internal Text Part
<body>
<h1 id='hid'>Dumb is giggling.<i>Unknown cause</i>，Maybe the laughing point is too low.!</h1>
</body>
<script>
hidobj=document.getElementById('hid');
//Get the value outside the label
alert(hidobj.textContent);
</script>
Click Change Background Color
<body>
<h1>00001</h1>
<h1>00002</h1>
<h1>00003</h1>
</body>
<script>
objs=document.getElementsByTagName('h1');
for(i=0;i<objs.length;i++){
objs[i].onclick=function(){
this.style.background='#ccc';
};
}
</script>
Variables in trigger functions of event objects are not executed at traversal time
<body>
<h1>00001</h1>
<h1>00002</h1>
<h1>00003</h1>
</body>
<script>
objs=document.getElementsByTagName('h1');
for(i=0;i<objs.length;i++){
objs[i].onclick=function(){
objs[i].style.background='#ccc';
};
}
alert(i);
</script>
</html>
//The first cycle:
objs[0].onclick=function(){
objs[i].style.background='#ccc';
}
i=1;
//Second cycle:
objs[1].onclick=function(){
objs[i].style.background='#ccc';
}
i=2;
//The third cycle:
objs[2].onclick=function(){
objs[i].style.background='#ccc';
}
i=3;
Mouse Move-in and Move-out Events
<body>
<h1>00001</h1>
<h1>00002</h1>
<h1>00003</h1>
</body>
<script>
objs=document.getElementsByTagName('h1');
for(i=0;i<objs.length;i++){
objs[i].onmouseenter=function(){
this.style.background='#ccc';
};
objs[i].onmouseleave=function(){
this.style.background='#fff';
};
}
</script>
Cyclic click Toggle
<body>
<img src="/img/cai.png" id="imgid">
</body>
<script>
imgidobj=document.getElementById('imgid');
i=0;
imgidobj.onclick=function(){
if(i%2==0){
this.src='/img/dai.png';
}else{
this.src='/img/cai.png';
}
i++;
}
</script>
7. Six instances of DOM element objects:
1. Move-in and move-out effects
2. Cyclic Click to Change Colors
3. Click on the line number
4. Click on the title to switch content
5. Multi-election, anti-election and non-election
6. Choose fruit
Move in and move out effects
<body>
<h1>0001</h1>
<h1>0002</h1>
<h1>0003</h1>
</body>
<script>
objs=document.getElementsByTagName('h1');
for(i=0;i<objs.length;i++){
objs[i].onmouseenter=function(){
this.style.background='#ccc';
};
objs[i].onmouseleave=function(){
this.style.background='#fff';
};
}
</script>
Cyclic Click Color Change
<body>
<h1>0001</h1>
<h1>0002</h1>
<h1>0003</h1>
</body>
<script>
objs=document.getElementsByTagName('h1');
for(i=0;i<objs.length;i++){
objs[i].setAttribute('s','0');
objs[i].onclick=function(){
s=parseInt(this.getAttribute('s'));
if(s%2==0){
this.style.background='#ccc';
}else{
this.style.background='#fff';
}
this.setAttribute('s',s+1);
};
}
</script>
Click on the line number
<body>
<h1>aaaa</h1>
<h1>bbbb</h1>
<h1>cccc</h1>
<h1>dddd</h1>
<h1>eeee</h1>
</body>
<script>
objs=document.getElementsByTagName('h1');
for(i=0;i<objs.length;i++){
objs[i].setAttribute('s',i+1);
objs[i].onclick=function(){
s=this.getAttribute('s');
this.innerHTML=s;
};
}
</script>
Click on the title to switch content
<body>
<h1>linux technology</h1>
<p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
<h1>php technology</h1>
<p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>
<h1>js technology</h1>
<p>js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!</p>
</body>
<script>
h1s=document.getElementsByTagName('h1');
ps=document.getElementsByTagName('p');
for(i=0;i<h1s.length;i++){
h1s[i].setAttribute('i',0);
h1s[i].setAttribute('s',i);
ps[i].setAttribute('id','p'+i);
h1s[i].onclick=function(){
s=this.getAttribute('s');
pobj=document.getElementById('p'+s);
i=parseInt(this.getAttribute('i'));
if(i%2==0){
pobj.style.display='none';
}else{
pobj.style.display='block';
}
this.setAttribute('i',i+1);
};
}
</script>
Multi-election, anti-election and none-election
<body>
<h2>Please select the following options:</h2>
<form action="">
<p>
<label><input type="checkbox" class='chk'> linux</label>
</p>
<p>
<label><input type="checkbox" class='chk'> php</label>
</p>
<p>
<label><input type="checkbox" class='chk'> javascript</label>
</p>
<p>
<input type="button" value="All elections" id='btn1'>
<input type="button" value="Not at all" id='btn2'>
<input type="button" value="Anti-election" id='btn3'>
</p>
</form>
</body>
<script>
//Full, none and no elections
btn1obj=document.getElementById('btn1');
btn2obj=document.getElementById('btn2');
btn3obj=document.getElementById('btn3');
chks=document.getElementsByClassName('chk');
btn1obj.onclick=function(){
for(i=0;i<chks.length;i++){
chks[i].checked=true;
}
}
btn2obj.onclick=function(){
for(i=0;i<chks.length;i++){
chks[i].checked=false;
}
}
btn3obj.onclick=function(){
for(i=0;i<chks.length;i++){
chks[i].checked=!chks[i].checked;
}
}
</script>
Choose fruit
<style>
*{
font-family: Microsoft YaHei;
}
select{
height:150px;
width:100px;
}
</style>
</head>
<body>
<h2>Please choose your favorite fruit.:</h2>
<form action="">
<select name="" id="s1" size='2'>
<option value="">Apple</option>
<option value="">Pumpkin</option>
<option value="">Watermelon</option>
<option value="">Bread</option>
<option value="">North melon</option>
</select>
<input type="button" value=">>" id='btn'>
<select name="" id="s2" size='2'></select>
</form>
</body>
<script>
s1obj=document.getElementById('s1');
s2obj=document.getElementById('s2');
btnobj=document.getElementById('btn');
btnobj.onclick=function(){
idx=s1obj.selectedIndex;
opts=s1obj.options;
opt=opts[idx];
s2obj.add(opt);
}
</script>
**
**
**
**
**