获取DOM对象有7种方式：1.document.getElementById('id');//返回结果是一个对象，如果存在两个标签拥有相同id，则返回第一个标签对象。
2.document.getElementsByTagName('标签名')；//返回结果是一个对象集合，以数组形式放在一起
3.document.getElementsByName('标签name属性的值')；//返回结果是一个对象集合，以数组形式放在一起
4.document.getElementsByClassName('类名');返回一个对象集合，以数组形式放在一起。
5.通过this参数给函数传递受监控对象给函数。
6.document.querySelectorAll(".cell");//类选择器
7.document.querySelectorAll("td");//标签选择器
8.document.querySelectorAll("#btn1");//地址选择器
1.document.getElementById();
<!DOCTYPE html>
<html>
<head>
<style>
#myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div id="myBtn" onclick="get()" name="a">aaaaaaaaaa</div>
<div id="myBtn" onclick="get()" name="a">bbbbbbbbb</div>
<div id="myBtn" onclick="get()" name="a">cccccccc</div>
<div id="myBtn" onclick="get()" name="a">ddddddddddd</div>
<script>
function get(){
//document.getElementById('myBtn') 通过id号获取对象
var x=document.getElementById('myBtn');//返回一个对象，多个相同id，选择第一个
alert(x.innerHTML);
}
</script>
</body>
</html>
2.document.getElementsTagName('标签名')；
<!DOCTYPE html>
<html>
<head>
<style>
#myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div id="myBtn" onclick="get()" name="a">aaaaaaaaaa</div>
<div id="myBtn" onclick="get()" name="a">bbbbbbbbb</div>
<div id="myBtn" onclick="get()" name="a">cccccccc</div>
<div id="myBtn" onclick="get()" name="a">ddddddddddd</div>
<script>
function get(){
//document.getElementsByTagName('myBtn') 通过标签名获取
var x=document.getElementsByTagName('div');//返回一个对象集合，以数组形式放在一起
alert(x[0].innerHTML);
alert(x[1].innerHTML);
alert(x[2].innerHTML);
alert(x[3].innerHTML);
}
</script>
</body>
</html>
3.document。getElementsName('name属性的值');
<!DOCTYPE html>
<html>
<head>
<style>
#myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div id="myBtn" onclick="get()" name="a">aaaaaaaaaa</div>
<div id="myBtn" onclick="get()" name="a">bbbbbbbbb</div>
<div id="myBtn" onclick="get()" name="a">cccccccc</div>
<div id="myBtn" onclick="get()" name="a">ddddddddddd</div>
<script>
function get(){
//document.getElementsByTagName('myBtn') 通过name属性的是获取
var x=document.getElementsByName('a');//返回一个对象集合，以数组形式放在一起
alert(x[0].innerHTML);
alert(x[1].innerHTML);
alert(x[2].innerHTML);
alert(x[3].innerHTML);
}
</script>
</body>
</html>
4.document.getElementsByClassName('类名');
<!DOCTYPE html>
<html>
<head>
<style>
.myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div class="myBtn" onclick="get()" name="a">aaaaaaaaaa</div>
<div class="myBtn" onclick="get()" name="a">bbbbbbbbb</div>
<div class="myBtn" onclick="get()" name="a">cccccccc</div>
<div class="myBtn" onclick="get()" name="a">ddddddddddd</div>
<script>
function get(){
//document.getElementsByTagName('myBtn') 通过name属性的是获取
var x=document.getElementsByClassName('myBtn');//返回一个对象集合，以数组形式放在一起
alert(x[0].innerHTML);
alert(x[1].innerHTML);
alert(x[2].innerHTML);
alert(x[3].innerHTML);
}
</script>
</body>
</html>
5.通过this参数给函数传递受监控对象给函数。
<!DOCTYPE html>
<html>
<head>
<style>
.myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div class="myBtn" onclick="get(this)" name="a">aaaaaaaaaa</div>
<div class="myBtn" onclick="get(this)" name="a">bbbbbbbbb</div>
<div class="myBtn" onclick="get(this)" name="a">cccccccc</div>
<div class="myBtn" onclick="get(this)" name="a">ddddddddddd</div>
<script>
function get(s){
alert(s.innerHTML);
}
</script>
</body>
</html>
6.document.querySelectorAll(".cell");//类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.cell{
width:50px;
height:50px;
border:1px solid #000;
box-sizing: border-box;
display: inline-block;
float: left;
}
.container{
width:200px;
}
</style>
</head>
<body>
<div class="container" onclick="clickme()">
</div>
</body>
<script src="index-div.js"></script>
</html>
index-div.jS
var cells = document.querySelectorAll(".cell");//类选择器(老师)
//cells[0].style.background="#000";
var Blocks = [];
function oneBlock(red, green, blue, index) {
var obj = {
r: red,
g: green,
b: blue,
x: index
}
return obj;
}
function getBlocks() {
var red = Math.random() * 255 | 0;
var green = Math.random() * 255 | 0;
var blue = Math.random() * 255 | 0;
var index = Math.random() * 4 | 0;
var p = oneBlock(red, green, blue, index);
return p;
}
for(var i = 0; i < 6; i++) {
var p = getBlocks();
Blocks.push(p);
}
setColor();
function setColor() {
for(var i = 0; i < 6; i++) {
cells[i * 4 + Blocks[i].x].style.background = 'rgb(' + Blocks[i].r + ',' + Blocks[i].g + ',' + Blocks[i].b + ')';
}
}
function clickme() {
var e = event;
console.log(e.clientY);
if(((e.clientY / 50) | 0) === 5 && ((e.clientX / 50) | 0) === Blocks[5].x) {
for(var i = 0; i < 6; i++) {
cells[i * 4 + Blocks[i].x].style.background = "#fff";
}
Blocks.pop();
Blocks.unshift(getBlocks());
setColor();
} else if(Blocks[(e.clientY / 50 | 0)].x !== (e.clientX / 50 | 0)) { //老师的代码//一、踩到白块，全错。
alert("你输了！");
}
}
7.document.querySelectorAll("td");//标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
width:50px;
height: 50px;
border:1px solid #000;
box-sizing: border-box;
/*background-color: #f9f;*/
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" onclick="clickme()">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script src="index-up.js"></script>
</html>
index-up.jS
var cells = document.querySelectorAll("td");//标签选择器
//cells[0].style.background="#000";
var Blocks = [];
function oneBlock(red, green, blue, index) {
var obj = {
r: red,
g: green,
b: blue,
x: index
}
return obj;
}
function getBlocks() {
var red = Math.random() * 255 | 0;
var green = Math.random() * 255 | 0;
var blue = Math.random() * 255 | 0;
var index = Math.random() * 4 | 0;
var p = oneBlock(red, green, blue, index);
return p;
}
for(var i = 0; i < 6; i++) {
var p = getBlocks();
Blocks.push(p);
}
setColor();
function setColor() {
for(var i = 0; i < 6; i++) {
cells[i * 4 + Blocks[i].x].style.background = 'rgb(' + Blocks[i].r + ',' + Blocks[i].g + ',' + Blocks[i].b + ')';
}
}
function clickme() {
var e = event;
console.log(e.clientY);
if(((e.clientY / 50) | 0) === 5 && ((e.clientX / 50) | 0) === Blocks[5].x) {
for(var i = 0; i < 6; i++) {
cells[i * 4 + Blocks[i].x].style.background = "#fff";
}
Blocks.pop();
Blocks.unshift(getBlocks());
setColor();
} else if(Blocks[(e.clientY / 50 | 0)].x !== (e.clientX / 50 | 0)) { //老师的代码//一、踩到白块，全错。
alert("你输了！");
}
}
8.document.querySelectorAll("#btn1");//地址选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#btn1 {
position: absolute;
top: 10px;
left: 10px;
}
#btn2 {
position: absolute;
top: 10px;
left: 80px;
}
</style>
</head>
<script src="d3.v3.js"></script>
<body>
<script>
window.onload=function() {
d3.json('rect.json', function (err, dataset) {
if (err)
return
//console.log(dataset)
draw();
function draw() {
if (d3.select('body').select('svg')) //判断是否有svg
d3.select('body').select('svg').remove()
var width = 300 //化布宽度
var height = 300 //画布高度
var rectStep = 35 //包括空白部分
var rectWidth = 30 //不包括空白
var color = d3.scale.category10() //颜色比例尺
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
svg.selectAll('rect')
.data(dataset['data'])
.enter()
.append('rect')
.attr('x', function (d, i) { //d当前绑定数据 i序号
return i * rectStep
})
.attr('y', function (d, i) {
return height
//return height-d.width
})
.attr('width', rectWidth)
.attr('height', function (d, i) {
return 0
})
// // .attr('fill','yellow')//全部一个颜色
//// .attr('fill',function(d,i){
//// if(i=0)
// })
.attr('fill', function (d, i) {
return color(i)
})
//注册鼠标交互写在动画之前
.on('mouseover', function (d, i) { //鼠标放上去
d3.select(this)
.attr('fill', 'yellow')
})
.on('mouseout', function (d, i) {
d3.select(this)
.attr('fill', function (d) { //上面已经有i
return color(i)
})
})
.transition() //启动动画
.delay(function (d, i) {
return i * 300 //i序号300延迟
})
.duration(250) //持续的时间
.ease('circle') //闪电near线性 circle elastic bounce
.attr('y', function (d, i) {
return height - d.width //
})
.attr('height', function (d, i) {
return d.width
})
//鼠标响应事件： click mouseover mouseout mousemove
//mousedown mouseup dblcilck双击
//zoom滚轮 brush刷子
var text = svg.selectAll('text')
.data(dataset['data'])
.enter()
.append('text')
.attr('fill', 'black')
.attr('font-size', '15px')
.attr('text-anchor', 'middle') //文本锚点 中心对其
.attr('x', function (d, i) {
return i * rectStep
})
.attr('y', function (d, i) {
//return height-d.width//字先存在
return height //字和图一起动
})
.text(function (d, i) {
return d.width
})
.attr('dx', rectWidth / 2)
.attr('dy', "1em") //em:默认字体大小
.transition()
.delay(function (d, i) {
return i * 300
})
.duration(2500)
.ease('elastic') //闪电near线性 circle elastic bounce
.attr('y', function (d, i) {
return height - d.width //
})
.attr('height', function (d, i) {
return d.width
})
}
var button1 = document.querySelector("#btn1");
var button2 = document.querySelector("#btn2");
button1.onclick = function () {
dataset['data'].sort(function (a, b) {
return a.width - b.width
})
draw();
};
button2.onclick = function () {
dataset['data'].sort(function (a, b) {
return b.width - a.width
})
draw();
}
})
}
</script>
<button type='button' id='btn1'>升序</button>
<button type='button' id='btn2'>降序</button>
</body>
</html>
