JavaScript基础知识（一）

DOM对象

文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
通过DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 使用。
DOM对象，即是我们用传统的方法(javascript)获得的对象。
DOM准确说是对文档对象的一种规范标准(文档对象模型),标准只定义了属性和方法行为

JS的引入

直接在HTML中写

1
2
3

<script type="text/javascript">
   var str = "Hello, World!";
</script>

外部导入

1	<script src="text_name.js"></script>

注意事项：JS最好在HTML文件末尾引入

一是为了提升页面加载速度

二是为了生成完整的DOM对象，避免JS执行失效

变量声明
可以用_、数字、字母、$、组成，且数字不能开头
用 var 来声明变量，如果不用var声明，也不会报错，但是会污染全局变量

JS基本变量类型

数值型
字符串类型
布尔类型
undefined型：原生数据类型变量[以上3种，其本身也是]没有值，返回的是undefined
null型：对象类型变量[DOM对象，数组等]没有值，返回的是null
JS组合数据类型

对象类型

//声明
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>

操作对象的属性

1	<img src="" alt="" title="" style="width: 300px; height: 300px;">

普通属性可以通过：[ 对象.标签属性 ] 访问
CSS属性通过：[ 对象.style.属性 ] 访问，这种方式只适用于将css直接写在HTML标签内的属性
对类名进行操作，需要使用下面这种方式：[ 对象.className ]
如果CSS带有横线，如border-top-style，则把横线去除，并且横线后的第一和字母大写，如 [ 对象.borderTopStyle ]

获取对象在内存中计算后的样式

上一节中，obj.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>