JS数组
数组对象的作用是：使用单独的变量名来存储一系列的值。
数组的创建方式：
1、数组直接量（字面量）形式创建数组；
2、通过构造函数Array()创建数组；
注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。
对象没有length属性
3、访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
4、修改已有数组中的值
如需修改已有数组中的值，只要向指定下标号添加一个新值即可。
DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是标题</title>
</head>
<body>
<!-- -->
<div id="box" class="div" style=" 30px;height: 50px;" name="nana">我是一个文本节点<!--我是注释节点--><span name="nana">我是一个span标签</span></div>
<script type="text/javascript">
//元素节点、文本节点、属性节点、注释节点
// nodeName nodeValue nodeType -->了解
// 元素节点 标签名 null 1
// 属性节点 属性名 属性值 2
// 文本节点 #text 文本值 3
// 注释节点#comment 注释内容 8
//获取节点所有的子节点 节点.childNodes
//获取节点所有属性节点 节点.attributes
//1. 元素节点 4种方式获取
var oDiv = document.getElementById("box");
var oDiv = document.getElementsByClassName("div")[0];
var oDiv = document.getElementsByTagName("div")[0];
//var oDiv = document.getElementsByName("nana")[1];
//console.log( oDiv.innerHTML );
//获取节点所有的子节点
console.log( oDiv.childNodes );
var oDivChilds = oDiv.childNodes;
// //2.文本节点
console.log( oDivChilds[0].nodeName,oDivChilds[0].nodeValue,oDivChilds[0].nodeType );
// //3.注释节点
// console.log( oDivChilds[1].nodeName,oDivChilds[1].nodeValue,oDivChilds[1].nodeType );
//
// //4.获取元素节点的属性节点
console.log( oDiv.attributes );
// var oDivAttris = oDiv.attributes;
// console.log( oDivAttris[0].nodeName,oDivAttris[0].nodeValue,oDivAttris[0].nodeType );
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="new_file.js"></script>
</head>
<body>
<input type="radio" name="" /><input type="text" name="" /><div id="box">
<span>我是span1</span>
<span>我是span2</span></div><input type="text" name="" />
<script type="text/javascript">
// 怎么获取前面所有的兄弟元素？？？？？？
var oDiv = $("box");
// 1.获取所有的子节点 childNodes
console.log( oDiv.innerText );
// 2.获取第一个子节点 firstChild
console.log( oDiv.firstChild );
// 3.获取最后一个子节点 lastChild
console.log( oDiv.lastChild );
// 4.获取父节点 parentNode
console.log( oDiv.parentNode );
////////////////兄弟关系/////////////////
// 5.获取前一个兄弟节点 previousSibling
console.log( oDiv.previousSibling );
// 6.获取下一个兄弟节点 nextSibling
console.log( oDiv.nextSibling );
///////////////////根节点/////////////////
console.log( oDiv.ownerDocument );
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
}
.box{
40px;
height: 40px;
border-radius: 50%;
position: absolute;
animation: move 5s ease-out forwards infinite;
/*animation: 动画名 播放事件 播放速度 反向播放 重复次数;*/
}
@-webkit-keyframes move{
50%{left:800px;top:500px;opacity: 0;}
100%{left:0px;top:100px;opacity: 1;}
}
@-moz-keyframes move{
50%{left:600px;top:500px;opacity: 0;}
100%{left:0px;top:100px;opacity: 1;}
}
@keyframes move{
80%{left:400px;top:500px;opacity: 0;}
50%{left:0px;top:100px;opacity: 1;}
}
</style>
</head>
<body>
<button onclick="createDiv()">创建div</button>
<script type="text/javascript" src="new_file.js"></script>
<script type="text/javascript">
//document.createElement("div");
function createDiv(){
var oDiv = document.createElement("div");
//oDiv = $("div");
//console.log(oDiv)
//设置div的样式
// 方法一：用js设置样式
// oDiv.style.width = "200px";
// oDiv.style.height = "200px";
// oDiv.style.backgroundColor = randomColor();
// oDiv.style.float = "left";
// // 方法二：用css设置样式
oDiv.className = "box";
oDiv.style.backgroundColor = randomColor();
oDiv.style.left = ( Math.random()*($w()-40) )+"px";
oDiv.style.top = ( Math.random()*($h() -40) )+100+"px";
// 父节点.appendChild(子节点) 将子节点添加到父节点孩子列表的末尾
document.body.appendChild(oDiv);
}
</script>
</body>
</html>
//获取滚动高度
function $top(){
return document.documentElement.scrollTop||document.body.scrollTop;
}
//获取可视窗口的宽
function $w(){
return document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth;
}
//获取可视窗口的高
function $h(){
return document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
}
//根据id获取元素节点
function $(idName){
return document.getElementById(idName);
}
//根据标签名获取元素节点
function $tag(tag){
var tagInput=document.getElementsByTagName(tag);
return tagInput;
}
// //根据class值获取元素节点
// function $classValue(tag){
// var clvInput=document.getElementsByTagName(clv);
// return clvInput;
// }
//随机颜色
function randomColor(choose){
//#ffffff
if(1){
var str="0123456789abcdefABCDEF";
var bgc="#";
for(var i=0; i<6; i++){
var index=parseInt(Math.random()*str.length);
bgc+=str[index];
}
return bgc;
}
//rgb
if(2){
var r=parseInt(Math.random()*256);
var g=parseInt(Math.random()*256);
var b=parseInt(Math.random()*256);
var rgb1="rgb("+r+","+b+","+b+")";
return rgb1;
}
}
//获取内部外部样式表中的属性的属性值
function getStyle(obj,name){
//IE专用 obj.currentStyle!=null
if(obj.currentStyle){
return obj.currenStyle(name); //IE专用
}else{
return window.getComputedStyle(obj,null)[name];
}
}