Collection
Collection
DOM对象：文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
通过DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 使用。
DOM对象，即是我们用传统的方法(javascript)获得的对象。
DOM准确说是对文档对象的一种规范标准(文档对象模型),标准只定义了属性和方法行为。
JS的引入
直接在HTML中写
<script type="text/javascript"> var str = "Hello, World!"; </script>
外部导入
<script src="text_name.js"></script>
注意事项：JS最好在HTML文件末尾引入
一是为了提升页面加载速度
二是为了生成完整的DOM对象，避免JS执行失效
变量声明
可以用_、数字、字母、$、组成，且数字不能开头
用 var 来声明变量，如果不用var声明，也不会报错，但是会污染全局变量
JS基本变量类型
数值型
字符串类型
布尔类型
undefined型：原生数据类型变量[以上3种，其本身也是]没有值，返回的是undefined
null型：对象类型变量[DOM对象，数组等]没有值，返回的是null
JS组合数据类型
对象类型
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
//声明
var object = {name:'zhangsan', age:20};
//调用
console.log(object.name);
//也可以用下面这用方式
console.log(object[ame]);数组类型
即便中间删除一些数据，编号依然是从0~n，中间不会有空缺
数组里面的数据可以是不同类型
//声明 var arr = ['a',23,"hellw",true]; //调用 console.log(arr[2]);
运算符
基本的+、-、*、/、不想说，懒癌发作。
JS的连接运算符是："+"
<script>
console.log(2+3); //输出 5
console.log("hellow"+""+"world"); //输出 hello world
console.log(2+3+5+"hello"+6+8); //输出 10hello68，一旦碰到非法数字，后面的一律理解为拼接
</script>逻辑运算符：不是单纯的返回true或false，而是返回最早能判断表达式整体结果的值
<script> var a = false; var b = 6; var c = a || b; console.log(c); //输出 6 var d = true； var e = a || b || d; console.log(d); //输出 6 </script>
控制结构
//遍历数组
<script>
var arr = ["赵","钱","孙","李"];
for(var i=0; i++; i<arr.length){
console.log(arr[i]);
}
</script>
//遍历对象
<script>
var obj = {name:"lisi",age:28,height:180};
for(var k in obj){
console.log(k); //正确
console.log(obj.k); //错误
console.log(obj[k]); //正确
}
</script>对象操作
<script> var str = "helloworld"; console.log(str.length); //输出 10 console.log(str.substr(2,3)); //输出 llo </script>
在JS中，如果调用属性和方法，会自动将变量转化为对象，这是JS中的重要思想
indexOf()函数
<script>
var str = "helloworld";
console.log(str.indexOf("he")); //找到了，返回值为0，为false
console.log(str.indexOf("dede")); //找不到，返回值为-1，为true
//这就比较尴尬了，所以要进行如下处理
console.log(str.indexOf("he") >= 0 ？ "find" : "not find");
</script>JS内置对象
<script> var dt = new Date(); //想调用时间函数，需要先实例化 console.log(dt.getFullYear()); </script> //但是Math是个例外，不需要实例化，就可以直接使用 <script> console.log(Math.floor(2.3)); //调用的其实是Math类的静态方法 </script>
浏览器window对象 [即BOM对象]
window对象是浏览器宿主对象，简单说就是用户看到的浏览器窗口。其本身和JS语言没有关系
window对象又包含很多子对象
location //控制地址栏
screen //控制屏幕
history //控制浏览器历史记录
document //控制页面文本，这就是DOM对象
作用域
<script>
function t1(){
var str = "china";
function t2(){
var str = "japan"; //输出结果为 japan,如果将本行注释掉，输出结果为 china
alert(str);
}
t2();
}
t1();
</script>
<script>
window.str = "union";
function t1(){
function t2(){
str = "japan";
alert(str);
}
t2();
}
t1();
alert(window.str); //输出结果为 japan japan
</script>如果一个变量在自身作用域内没有赋值，那么它会一直向上级查找，如多查到window层面[全局]还没有，就返回undefined
变量前不加 var，就是赋值，比如第二个例子，第一次打印的是t2()的japan,但是由于其赋值运算污染了全局变量的值，所以，第二次也是japan
找对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>关键是找对象</h1>
<div id="test1">
<p></p>
<p></p>
<p></p>
</div>
<div id="test2"></div>
<input type="text" name="username" id="" value="poly">
<script>
//用ID来查询，返回值是"对象"
console.log(document.getElementById('test1'));
//用标签来查询，返回值是"对象的集合"，即使只找到一个对象，也包装成对象集合返回
var ps = document.getElementsByTagName('p');
ps[1].style.background = 'green';
//对于表单元素，可以用name来查询，返回值是对象集合
alert(document.getElementsByName('username')[0].value);
document.getElementsByName('username')[0].value = 'lucy';
//按照类名查找，返回值是"对象的集合"
document.getElementsByClassName('test2')[0].style.background = 'gray';
//查找子节点或父节点
alert(document.getElementById('test1').childNodes.length); //输出 7,标准属性,一般不用
alert(document.getElementById('test1').children.length); //输出 3
/* children非标准属性，但兼容性好，它不包含空白节点 */
document/getElementsByTagName('p')[2].parentNode.style.border = '1px solid green';
</script>
</body>
</html>操作对象的属性
<img src="" alt="" title="" style="width: 300px; height: 300px;">
普通属性可以通过：[ 对象.标签属性 ] 访问
CSS属性通过：[ 对象.style.属性 ] 访问，这种方式只适用于将css直接写在HTML标签内的属性
对类名进行操作，需要使用下面这种方式：[ 对象.className ]
如果CSS带有横线，如border-top-style，则把横线去除，并且横线后的第一和字母大写，如 [ 对象.borderTopStyle ]
获取对象在内存中计算后的样式
上一节中，obj.style只能取得“内联style”的值，对于<style></style>中的CSS属性值，则无能为力，我们可以用obj.currentStyle和window.getConputeStyle来获取。
注意：只有IE和Opera支持使用currentStyle获取HTML Element的计算后的样式，其他浏览器中不支持，标准浏览器中使用getComputeStyle，IE9及以上也支持getComputeStyle
window.getComputeStyle(obj,伪元素)
参数说明：
第一个参数为要获取计算后的样式的目标元素
第二个参数为期望的伪元素，如":after"、":first-letter"等，一般设为null
考虑兼容性，封装函数
<script>
function getStyle(){
return e1.getcurrentStyle ? e1.getcurrentStyle[attr] : getComputeStyle(e1,null)[atttr];
}
</script>注意：这2个方法获取的对象是只读的，要该样式，还得靠obj.style
删除节点
找到对象
找到它的父对象parentObj
parentObj.removeChild(子对象);
//删除最后一个li
<input type="button" value="删除最后一个li" onclick="del();">
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<script>
function del(){
var lis = document.getElementsByTagName(li);
var lastli = lis[lis.length-1];
lastli.parentNode.removeChild(lastli);
}
</script>创建节点
创建对象
找到父对象parentObj
parentObj.addChild(对象);
//添加一个li
<input type="button" value="删除最后一个li" onclick="add();">
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
</ul>
<script>
function add(){
var li = document.createElement('li'); //创建节点
var text = document.createTextNode('冬'); //创建一个文本节点
li.appendChild(text); //向节点添加最后一个子节点。
document.getElementsByTagName('ul')[0].appendChild('li');
}
</script>暴力操作节点
innerHTML：代表节点内的内容，能读能写，不是一个W3C规定的标准对象属性，但是，各浏览器支持的很好。
<input type="button" value="添加春夏秋" onclick="add3();">
<input type="button" value="添加冬" onclick="add1();">
<script>
function add3(){
var ul = document.getElementsByTagName('ul')[0];
ui.innerHTML = "<li>春</li><li>夏</li><li>秋</li>";
}
function add1(){
var ul = document.getElementsByTagName('ul')[0];
ui.innerHTML += "<li>冬</li>";
}
</script>