JS第三章DOM
html:
JS:
1.
window.οnlοad=function(){
//Math()
var a=2.56;
document.write(Math.ceil(a)+"
");//上舍
document.write(Math.floor(a)+"
");//下舍
document.write(Math.round(a)+"
");//四舍五入为整数
document.write(Math.random(a)+"
");//o-1之间随机数
document.write(Math.floor(Math.random()*98+2)+"
");
}
2.
html:
随机颜色
JS:
window.οnlοad=function(){
var color=[“红色”,“蓝色”,“绿色”,“橙色”,“紫色”,“黄色”,“青色”];
var yanse=document.getElementById(‘yanSe’);
var suiji=document.getElementById(‘suiji’);
suiji.οnclick=function(){
var num=Math.floor(Math.random()*color.length);
yanse.innerHTML=color[num];
}
}
setTimeout(“alert(‘111’)”,3000);//停几秒会跳转页面
3.
html:
<a href="">你好</a>
<img src="1.jpg" id="girl"width="200px height=200px"/>
<h1>喜欢的水果</h1>
<p>DOM应用</p>
JS:
window.onload=function(){
var body=document.getElementsByTagName(‘body’)[0];//标签值,body有很多,以数组形式
var girl=document.getElementById(‘girl’);
alert(body.firstElementChild.innerHTML);//“你好超链接”
alert(body.lastElementChild.innerHTML);//最后一个元素Dom应用
alert(girl.nextElementSibling.innerHTML);//图片下一个元素
alert(girl.previousElementSibling.innerHTML);//上一个元素
}
4.
html:
得到属性
设置属性
JS:
window.οnlοad=function(){
var get=document.getElementById(‘get’);
var set=document.getElementById(‘set’);
var girl=document.getElementById(‘girl’);
get.οnclick=function(){
alert(girl.getAttribute(‘src’));//得到图片属性
}
set.οnclick=function(){
girl.setAttribute(‘src’,‘2.jpg’);//给属性换值(换一张图片)
}
}
5.
html:
产品
js:
window.οnlοad=function(){
var p,div;
var product=document.getElementById(‘product’);
product.οnmοuseοver=function(){
p=document.createElement(‘p’);//鼠标放上创建
p.innerHTML=“你好”;
product.appendChild§;//添加标签
div=document.createElement('div');
div.innerHTML="我也好";
product.appendChild(div);//把div追加到P末尾
product.insertBefore(div,p);//把div插入到P之前
// product.cloneNode();
// product.cloneNode(true);//一样
product.replaceChild(p,div);//用其他节点替换指定节点
product.cloneNode(false);
p.style.color="#f00";
p.className="hello";
product.appendChild(p);
}
product.οnmοuseοut=function(){
product.removeChild§;//删除指定节点(鼠标离开内容消失)
// product.cloneNode();//克隆,复制节点
// product.cloneNode(true);
// product.cloneNode(false);
}
}