一、DOM简介
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
可以将每个HTML标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。
选择器：
-
document.getElementById('id')
-
document.getElementsByName('name')
-
document.getElementsByTagName('tagname')
实例演示一、修改单个标签中的文本内容。
| 1 2 3 4 5 6 7 8 9 10 | < div id = "n1" > < p >hello aaaaaa</ p > </ div > < script type = "text/javascript" > <!-- 通过标签ID获取到标签对象 --> var name1 = document.getElementById('n1'); <!-- 修改标签文本内容为'tuchao' --> name1.innerText = 'tuchao'; </ script > |
实例演示二、通过标签name修改多个标签的内容
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < div id = "n1" > < p >hello aaaaaa</ p > </ div > < hr /> < div name = "n2" > < p >heheheheeeeeee</ p ></ div > < hr /> < div name = "n2" > < p >bbabababbabab</ p ></ div > < script type = "text/javascript" > <!-- 通过标签name获取到标签对象 --> var name2 = document.getElementsByName('n2'); <!-- 当获取到多个同name标签时，则通过序号来区别，name2[0]表示第一个，name2[1]则表示第二个 --> name2[0].innerText = 'tuchao'; name2[1].innerText = 'tuchao'; </ script > |
页面效果：
实例演示三、通过标签tag修改多个标签的内容
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < div id = "n1" > < p >hello aaaaaa</ p > </ div > < hr /> < div name = "n2" > < p >heheheheeeeeee</ p ></ div > < hr /> < div name = "n2" > < p >bbabababbabab</ p ></ div > < script type = "text/javascript" > <!-- 通过标签tag获取到标签对象 --> var name3 = document.getElementsByTagName('div'); <!-- 对该对象进行循环，逐一取出每个对象进行修改 --> for (var item in name3){ name3[item].innerText = 'elephant' } </ script > |
页面效果：
常用函数：
-
创建标签
document.createElement('a')
-
获取或者修改样式
obj.className
-
获取或设置属性
setattribute(key,val) getattribute(key)
-
获取或修改样式中的属性
obj.style.属性
-
提交表单
document.geElementById('form_id').submit()
实例演示四、在标签中加入内容
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < div id = "n1" > < p >hello aaaaaa</ p > </ div > < script type = "text/javascript" > <!-- 创建一个a标签 --> var tag = document.createElement("a"); <!-- 给创建的标签赋予链接 --> tag.href = ' <!-- 给标签设置文本字符 --> tag.innerText = '点希望'; var id1 = document.getElementById('n1'); <!-- 给id1对象添加标签 --> id1.appendChild(tag); </ script > |
页面效果：
实例演示五、标签替换
| 1 2 3 4 5 6 7 8 9 10 11 | < div id = "n1" > < p >hello aaaaaa</ p > </ div > < script type = "text/javascript" > <!-- 创建标签对象 --> var tag = "< a href = 'http://www.baidu.com' >百度一下</ a >" var id1 = document.getElementById('n1'); <!-- 替换标签 --> id1.innerHTML = tag; </ script > |
页面效果会显示原id="n1"的div标签消失了，替换成了自定义的超链接标签。
实例演示六、修改标签的Class
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> < html lang = "en" > < head > < meta http-equiv = "Content-Type" charset = "UTF-8" content = "text/html" > < title >js_st1</ title > < style type = "text/css" > .hide {display: none;} .n22 {color:red;} </ style > </ head > < body > < div class = "n22" name = "n2" > < p >heheheheeeeeee</ p ></ div > < hr /> < div name = "n2" > < p >bbabababbabab</ p ></ div > < script type = "text/javascript" > var id2 = document.getElementsByName('n2'); <!-- 将原样式n22替换为hide样式 --> id2[0].className = 'hide' </ script > </ body > </ html > |
此时第一个div在页面中将不会显示了
实例演示七、修改标签的name值
| 1 2 3 4 5 6 7 8 9 10 11 | < div id = "n3" name = "dog" > </ div > < script type = "text/javascript" > <!-- 通过id获取到标签对象 --> var id3 = document.getElementById('n3'); <!-- 使用log打印原name值 --> console.log(id3.getAttribute('name')); <!-- 修改标签的name值为'cow' --> id3.setAttribute('name','cow'); console.log(id3.getAttribute('name')); </ script > |
页面效果：
实例演示八、修改标签样式
| 1 2 3 4 5 6 7 8 9 10 | < div style = "width:500px; height:300px; border:solid black 1px" id = "n3" name = "dog" > </ div > < script type = "text/javascript" > var id3 = document.getElementById('n3'); <!-- 获取该标签的宽度 --> var w = id3.style.width; console.log(w); <!-- 修改样式 --> id3.style.width = '200px' </ script > |
页面效果：修改前
页面效果：修改后
常用事件：
实例演示九、创建按钮点击事件
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < form id = "F1" action = 'https://www.baidu.com/s?' method = "GET" > <!-- 这里的wd是传给后端程序的value --> < input type = 'text' name = 'wd' /> <!-- 定义点击事件，对应Foo()函数 --> < input type = 'button' value = '按钮提交' onclick = 'Foo();' /> </ form > < script type = "text/javascript" > <!-- 定义点击函数内容，提交'F1'对象表单 --> function Foo (){ document.getElementById('F1').submit() } </ script > |
常用方法：
-
定义一个函数每隔一定的时间自动执行一次，括号中左边写执行的函数名逗号分割，右边写间隔的时长单位为毫秒。
setInterval('Foo()',20)
-
用于停止setInterval的循环执行，这个函数括号中接受的参数为setInterval函数返回的值。
clearInterval(interval)
-
定义一个函数间隔一定的时间自动执行，与setInterval函数不同的是这个方法只让函数执行一次。
setTimeout('Go()',10000)
-
用于取消setTimeout函数的执行，函数接受的参数是setTimeout函数返回的值。
clearTimeout()
搜索框实例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> < html lang = "en" > < head > < meta http-equiv = "Content-Type" charset = "UTF-8" content = "text/html" > < title >搜索框实例</ title > < style type = "text/css" > .gray{color: gray; height: 30px; width: 220px; } .black{ color: black; height: 30px; width: 220px; } </ style > </ head > < body > < input type = 'text' class = 'gray' id = 'tip' value = '请输入关键词' onfocus = 'Enter();' onblur = 'Leave();' /> < script type = "text/javascript" > function Enter(){ var id = document.getElementById('tip'); id.className = 'black' if(id.value=='请输入关键词' || id.value.trim()==''){ id.value = '' } } function Leave(){ var id = document.getElementById('tip'); if(id.value=='请输入关键词' || id.value.trim()==''){ id.value='请输入关键词' id.className='gray' }else{ id.className='black' } } </ script > </ body > </ html > |
跑马灯实例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> < html lang = "en" > < head > < meta http-equiv = "Content-Type" charset = "UTF-8" content = "text/html" > < title >跑马灯 哈哈和进度条 </ title > < style type = "text/css" > </ style > </ head > < body > < script type = "text/javascript" > function Go(){ <!-- 获取title文本内容 --> var content = document.title; <!-- 获取内容的第一个字符 --> var firstChar = content.charAt(0) <!-- 获取title的第二个至最后一个字符 --> var sub = content.substring(1,content.length) document.title = sub + firstChar; } setInterval('Go()',1000); </ script > </ body > </ html > |
进度条实例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> < html lang = "en" > < head > < meta http-equiv = "Content-Type" charset = "UTF-8" content = "text/html" > < title >跑马灯 哈哈和进度条 </ title > < style type = "text/css" > </ style > </ head > < body > < div style = "width:1000px;background-color:gray" > < div id = 'jindu' style = "width:10%;background-color:red;height:20px;" ></ div > </ div > < div > < input type = 'button' value = '点击停止' onclick = 'Stop();' /> </ div > < script type = "text/javascript" > pro = 10 function Foo(){ var id = document.getElementById('jindu'); pro = pro + 1; if(pro > 100){ clearInterval(interval) }else{ id.style.width = pro+'%'; } } interval = setInterval('Foo()',20) <!-- 定义停止函数，用于停止进度条 --> function Stop(){ clearInterval(interval) } </ script > </ body > </ html > |