1.什么是DOM
-
DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。
-
创建的结构化文档：html、xml 等
-
DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使用的。
-
-
HTML DOM 将 整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员
2.document文档对象
浏览器加载整个HTML文档形成document 对象，document 对象可以访问和操作HTML文档中的所有元素。
1.标签元素的操作
-
根据id获得一个元素：getElementById(id属性值)
-
根据标签名称获得多个元素：getElementsByTagName(标签名称)
-
根据class属性获得多个元素：getElementsByClassName(class的属性值)
-
根据name属性获得多个元素：getElementsByName(name属性值)
-
创建一个新元素createElement()
-
将元素放到某个父元素的内部appendChild()
-
标签体的获取与设置：innerHTML / innerText
2.属性的操作
-
获得属性的值：getAtrribute(name)
-
设置属性的值：setAtrribute(name,value)
-
删除某个属性：removeAtrribute(name)
练习
//练习一: <script type="text/javascript"> //输出 <input type="text" name="username" value="张三" id="tid" >标签value属性的值 var tidElement = document.getElementById("tid"); alert(tidElement.value); //输出 <input type="text" name="username" value="张三" id="tid" >标签type属性的值 alert(tidElement.type); </script>//练习二 <script type="text/javascript"> //获取所有的input元素,返回值是数组 var inputs = document.getElementsByTagName("input"); alert(inputs.length); //遍历value的值 for(var i=0;i<inputs.length;i++){ alert(inputs[i].value); } //输出type="text"中 value属性的值 不包含按钮(button) for(var i=0;i<inputs.length;i++){ if(inputs[i].type=="text") alert(inputs[i].value); } //输出所有下拉选 id="edu"中option标签中 value属性的值 var eduElement = document.getElementById("edu"); var eduOptions = eduElement.getElementsByTagName("option"); for(var i=0;i<eduOptions.length;i++){ alert(eduOptions[i].value); } function showSelect(){ //输出所有下拉选select的option标签中value的值 //输出选中的值 var options = document.getElementsByTagName("option"); for(var i=0; i< options.length;i++){ if(options[i].selected) alert(options[i].value); } } </script>//练习3 <script type="text/javascript"> //通过元素的name属性获取所有元素的引用 name="tname" //测试该数据的长度 //遍历元素,输出所有value属性的值 var inputs = document.getElementsByName("tname"); /*for(var i=0;i<inputs.length;i++){ alert(inputs[i].value); }*/ //为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值 for(var i=0; i<inputs.length;i++){ inputs[i].onchange=function(){ alert(this.value); } } </script>//练习4： <script type="text/javascript"> //<li id="xj" value="xingji">EDG冠军</li>节点的value属性的值 var xjElement = document.getElementById("xj"); alert(xjElement.getAttribute("value")); </script>//练习5： <script type="text/javascript"> //给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li> var xjElement = document.getElementById("xj"); xjElement.setAttribute("name","xingjizhengba"); //测试 alert(xjElement.getAttribute("name")); </script>//练习6 <script type="text/javascript"> window.onload=function(){ //在div层中插入 <h1>海马</h1> var cityElement = document.getElementById("city"); cityElement.innerHTML="<h1>海马</h1>"; //在div层中插入“海马” 文本 //cityElement.innerHTML="海马"; //读取div的标签体内容 alert(cityElement.innerHTML); //读取div的标签体文本内容 alert(cityElement.innerText); } </script>//练习8: <script type="text/javascript"> //删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul> var cityElement = document.getElementById("city"); var bjElement = document.getElementById("bj"); //cityElement.removeChild(bjElement); //获取北京的父节点 var parent = bjElement.parentNode; alert(parent.id); </script>//练习9: <script type="text/javascript"> //点击北京节点， 将被反恐节点替换 var bjElement = document.getElementById("bj"); bjElement.onclick = function(){ var cityElement = document.getElementById("city"); var fkElement = document.getElementById("fk"); cityElement.replaceChild(fkElement,bjElement); } </script>// DOM练习10: <script type="text/javascript"> //增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下 var cityElement = document.getElementById("city"); var tjElement = document.createElement("li"); tjElement.innerHTML="天津"; tjElement.setAttribute("id","tj"); tjElement.setAttribute("value","tianjin"); cityElement.appendChild(tjElement); </script>//练习11： <script type="text/javascript"> // 在重庆前面插入新的节点 <li id="tj" name="tianjin">天津</li> var cityElement = document.getElementById("city"); var tjElement = document.createElement("li"); tjElement.innerHTML="天津"; tjElement.setAttribute("id","tj"); tjElement.setAttribute("value","tianjin"); var cityElement = document.getElementById("city"); var cqElement = document.getElementById("cq"); cityElement.insertBefore(tjElement,cqElement); </script>onload()：
onload() 页面加载成功触发
方式1：<body>使用onload属性确定需要执行的函数
<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //js代码在<body>之前，不能获得<body>标签体中的内容，还没有加载到 var e01 = document.getElementById("e01"); alert(e01); //打印：null function init () { //页面加载成功之后执行 var e02 = document.getElementById("e01"); alert(e02.value); //打印：哇哈哈 } </script> </head> <body onload="init()"> <input type="text" name="" id="e01" value="哇哈哈" /> </body>方式2： 通过window.onload 设置匿名函数
<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function () { //页面加载成功之后执行 var e02 = document.getElementById("e01"); alert(e02.value); //打印：哇哈哈 } </script> </head> <body> <input type="text" name="" id="e01" value="哇哈哈" /> </body>
2.this关键字
//this:在函数内部this表示：当前操作的元素。 <script type="text/javascript"> //页面加载完成事件 window.onload = function(){ //获取所有的tr标签 var trs = document.getElementsByTagName("tr"); //从2开始遍历数组 for(var i=2;i<trs.length;i++){ //索引的奇偶数判断 if(i%2==0){ trs[i].style.backgroundColor="#FFFAE8"; }else{ trs[i].style.backgroundColor="#9B70A9"; } //定义变量,保存变化后的颜色 var color=""; //每行注册鼠标的移入事件 trs[i].onmouseover = function(){ //记录修改后的颜色 color=this.style.backgroundColor; this.style.backgroundColor="#ccc"; } //每行注册鼠标移出事件 trs[i].onmouseout = function(){ this.style.backgroundColor=color; } } } </script>全选全不选
<input type="checkbox" onclick="selectAll(this)" > //步骤：编写selectAll(this)处理列表项的复选框是否勾选 <script type="text/javascript"> function selectAll(check){ var checkboxs = document.getElementsByClassName("itemSelect"); var checked = check.checked; for(var i=0;i<checkboxs.length;i++){ checkboxs[i].checked=checked; } } </script>JavaScript内置对象
String对象
JS的对象也分为内置对象和定义对象,Java中Object,String,System属于内置对象,自定义的Person,Student属于自定义的对象.
JS的自定义对象是函数实现的
<script type="text/javascript"> /* String对象 */ var str = "abc"// typeof 输出string var str2 = new String(str); //typeof 输出 object //以上定义方式,都可以使用String对象的方法 var s = "a-b-c-de-FG"; //字符串的长度 //alert(s.length);. //指定索引找字符 //alert(s.charAt(1)); //字符第一次出现的索引 //alert(s.indexOf("c")); //字符最后一次出现的索引 //alert(s.lastIndexOf("c")); //切割字符串 /*var strArr = s.split("-"); for(var i = 0 ; i < strArr.length;i++){ alert(strArr[i]); }*/ //获取索引之间的字符 //alert(s.substring(1,3)); //获取索引开始到长度的字符 //alert(s.substr(1,3)); </script>
Math对象
Math是数学计算的对象,此对象无需创建,直接Math.调用
<script type="text/javascript"> /* Math对象 直接调用 */ //向上取整 alert(Math.ceil(3.14)); //向下取整 alert(Math.floor(3.14)); //四舍五入取整 alert(Math.round(3.14)); </script>
Array数组对象
<script type="text/javascript"> /* 数组对象定义方式 new Array(); new Array(size); new Array(element0, element0, ..., elementn); */ //定义数组对象 var arr1 = new Array(); //赋值元素 arr1[0] = 1; arr1[1] = "a"; arr1[2] = 2.2; alert(arr1); //定义数组对象 var arr2 = new Array(3); //打印数组长度 alert(arr2.length); //定义数组对象 var arr3 = new Array(3,4,5,"a",true); alert(arr3); //开发中最常用方式 var arr4 = [1,2,3,4,"a","b","c"]; for(var i = 0 ; i< arr4.length;i++){ alert(arr4[i]); } //定义二位数组 var arr5 = [ [1,2,3],["a",4,"b"],[true,5,false] ]; //打印3 alert(arr5[0][2]); //打印a alert(arr5[1][0]); //打印false alert(arr5[2][2]); </script>
RegExp正则表达式对象
JS中的正则表达式和Java中的正则表达式相似
定义方式: 直接定义和创建对象方式 <script type="text/javascript"> /* 正则表达式定义 1. new RegExp对象 2. 正则被定义在俩个//内 [0-9][a-z][A-Z]{5} ^匹配开头 $匹配结尾 */ var reg = new RegExp("^[0-9]{5}$"); //正则对象方法test,测试与字符串是否匹配 var flag = reg.test("a2345"); alert(flag); var reg1 = /^[0-9]{5}$/; flag = reg1.test("6789 "); alert(flag); </script>
经典练习
省市二级联动
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px"> <option value="">----请-选-择-省----</option> <option value="0">北京</option> <option value="1">吉林省</option> <option value="2">山东省</option> <option value="3">河北省</option> <option value="4">江苏省</option> </select> <select id="cityId" style="width:150px"> <option value="">----请-选-择-市----</option> </select><script type="text/javascript"> // 定义二维数组:存储省市信息 var pros = [ ["朝阳","海淀","昌平"],["长春市","锦州市","吉林市"],["南京市","苏州市","徐州市"] ]; function selectCity(province){ //获取选中省份的市数组 var cityArr = pros[province]; //获取城市的select标签对象 var cityEle = document.getElementById("cityId"); //添加之前先清空option子标签 cityEle.innerHTML=""; //创建请选择的option子标签 var optionEle = document.createElement("option"); optionEle.innerHTML="----请-选-择-市----"; cityEle.appendChild(optionEle); //遍历数组,几个元素就创建几个子option标签 for(var i = 0;i < cityArr.length;i++){ //创建子标签 var optionEle = document.createElement("option"); //设置子标签的标签体内容 optionEle.innerHTML=cityArr[i]; //添加子标签 cityEle.appendChild(optionEle); } } </script>
3998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
