DOM(document object model):
1、直接可以获取的dom元素对象:
1.document.documentElement
2.document.head
3.document.title
4.document.body
html、body、title和head标签
<body>
<h1>linux is very much!</h1>
<h1>js is very much!</h1>
<h1>html5 is very much!</h1>
</body>
<script>
//html标签
document.documentElement.style.background='#00f';
//body标签
document.body.style.background='#f00';
//title标签
document.title='阿呆';
//head标签
alert(document.head.outerHTML);
</script>
2、获取元素对象方法:
1.document.getElementById() #返回一个元素对象(dom对象)
2.document.getElementsByTagName() #返回一个集合对象
3.document.getElementsByClassName() #返回一个集合对象
4.document.getElementsByName() #返回一个节点列表(nodelist)
getElementById通过id获取元素对象
<body>
<h1 id='hid'>linux is very much!</h1>
<h1>js is very much!</h1>
<h1>html5 is very much!</h1>
</body>
<script>
//通过id获取标签对象
hidobj=document.getElementById('hid');
hidobj.onclick=function(){
this.style.background='#888';
}
</script>
getElementsByClassName通过类名来获取元素对象
<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>
//通过标签名获取html对象
objs=document.getElementsByClassName('abc');
//遍历集合对象
for(i=0;i<objs.length;i++){
objs[i].style.background='#0f0';
}
</script>
getElementsByTagName通过标签名获取元素对象
<body>
<h1>linux is very much!</h1>
<h1>js is very much!</h1>
<h1>html5 is very much!</h1>
</body>
<script>
//通过标签名获取html对象
objs=document.getElementsByTagName('h1');
//返回集合对象(与数组相同)
alert(objs.length);
</script>
getElementsByName通过标签的name属性来获取元素对象
<body>
<h2>用户登录:</h2>
<form action="go.php" method='post' id='fid'>
<p>用户名:</p>
<p><input type="text" name='username'></p>
<p>密码:</p>
<p><input type="text" name='password'></p>
<p>
<input type="submit" value="ok">
</p>
</form>
</body>
<script>
//通过名字获取html对象
usernameobj=document.getElementsByName('username');
usernameobj[0].onfocus=function(){
this.style.outlineColor='#f00';
}
</script>
3、元素对象标准属性:
1.obj.id;
2.obj.className;
3.obj.style;
4.obj.title;
老方法设置和获取标准属性
<body>
<h2>用户登录:</h2>
<form action="go.php" class='abc' method='post' id='fid' sex='nv' age='20'>
<p>用户名:</p>
<p><input type="text" name='username'></p>
<p>密码:</p>
<p><input type="text" name='password'></p>
<p>
<input type="submit" value="ok">
</p>
</form>
</body>
<script>
fidobj=document.getElementById('fid');
//设置属性
fidobj.id='formid';
//获取属性值
alert(fidobj.id);
</script>
**
**
4、元素对象非标准属性:(undefined)
1.obj.username;
2.obj.age;
3.obj.sex;
**
**
**
5、统一的方法来获取标准或非标准属性:
1.获取
fidobj.getAttribute(‘age’);
2.设置
fidobj.setAttribute(‘age’,‘20’);
getAttribute获取标准或非标准属性的统一方法
<body>
<h2>用户登录:</h2>
<form action="go.php" class='abc' method='post' id='fid' sex='nv' age='20'>
<p>用户名:</p>
<p><input type="text" name='username'></p>
<p>密码:</p>
<p><input type="text" name='password'></p>
<p>
<input type="submit" value="ok">
</p>
</form>
</body>
<script>
fidobj=document.getElementById('fid');
//获取标准或非标准属性的统一方法
s=fidobj.getAttribute('action');
</script>
setAttribute设置标准或非标准属性的统一方法
<body>
<h2>用户登录:</h2>
<form action="go.php" class='abc' method='post' id='fid' sex='nv' age='20'>
<p>用户名:</p>
<p><input type="text" name='username'></p>
<p>密码:</p>
<p><input type="text" name='password'></p>
<p>
<input type="submit" value="ok">
</p>
</form>
</body>
<script>
fidobj=document.getElementById('fid');
//设置标准或非标准属性的统一方法
fidobj.setAttribute('age','2000');
//获取标准或非标准属性的统一方法
s=fidobj.getAttribute('age');
alert(s);
</script>
**
6、元素对象js属性:
1.obj.tagName;
2.obj.innerHTML;
3.obj.outerHTML;
4.obj.textContent;
innerHTML获取和设置标签内部的值
<body>
<h1 id='hid'>阿呆正在傻笑，原因不明，可能笑点太低!</h1>
</body>
<script>
hidobj=document.getElementById('hid');
//设置标签内部的值
hidobj.innerHTML='小菜太坏了!';
//获取标签内部的值
alert(hidobj.innerHTML);
</script>
outerHTML获取标签外部的值
<body>
<h1 id='hid'>阿呆正在傻笑，原因不明，可能笑点太低!</h1>
</body>
<script>
hidobj=document.getElementById('hid');
//获取标签外部的值
alert(hidobj.outerHTML);
</script>
tagName获取标签名
<body>
<h1 id='hid'>阿呆正在傻笑，原因不明，可能笑点太低!</h1>
</body>
<script>
hidobj=document.getElementById('hid');
//获取标签外部的值
alert(hidobj.tagName);
</script>
textContent标签内部文本部分
<body>
<h1 id='hid'>阿呆正在傻笑，<i>原因不明</i>，可能笑点太低!</h1>
</body>
<script>
hidobj=document.getElementById('hid');
//获取标签外部的值
alert(hidobj.textContent);
</script>
单击换背景色
<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>
事件对象的触发函数中变量不会在遍历时就执行
<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>
第一循环:
objs[0].onclick=function(){
objs[i].style.background='#ccc';
}
i=1;
第二循环:
objs[1].onclick=function(){
objs[i].style.background='#ccc';
}
i=2;
第三循环:
objs[2].onclick=function(){
objs[i].style.background='#ccc';
}
i=3;
鼠标移入移出事件
<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>
循环单击切换
<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、DOM元素对象的6个实例:
1.移入移出特效
2.循环点击换色
3.点击换行号
4.点击标题切换内容
5.多选、反选和全不选
6.选水果
移入移出特效
<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>
循环点击换色
<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>
点击换行号
<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>
点击标题切换内容
<body>
<h1>linux技术</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技术</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技术</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>
多选、反选和全不选
<body>
<h2>请选择以下选项:</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="全选" id='btn1'>
<input type="button" value="全不选" id='btn2'>
<input type="button" value="反选" id='btn3'>
</p>
</form>
</body>
<script>
//全选、全不选和反选
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>
选水果
<style>
*{
font-family: 微软雅黑;
}
select{
height:150px;
width:100px;
}
</style>
</head>
<body>
<h2>请选择你喜欢的水果:</h2>
<form action="">
<select name="" id="s1" size='2'>
<option value="">苹果</option>
<option value="">南瓜</option>
<option value="">冬瓜</option>
<option value="">面包</option>
<option value="">北瓜</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>
**
**
**
**
**
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
