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组合数据类型
对象类型
//声明 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>