DM是(Document Object Model)的简称。
创新互联公司自2013年起,公司以成都网站设计、成都网站制作、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户上千多家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。
一.找元素
二.获取内容
三.操作属性
四.设置样式
var a = document.getElementsByClassName("a"); a[o].style.background-color="red"; //(只能取钳在body里边的)
五.相关元素操作
五.元素的创建、添加、删除
var obj = document.createElement('标签名');
a.appendChild(); 向a中添加一个子元素。
a.removeChild();从a中删除一个子元素。
a.selectedIndex 选中的是第几个; a.options[a.selectedIndex] //取出第几个option对象;
六. 字符串操作
var s = "hello world";
alert(s.toLowerCase()); 转小写 toUpperCase();转大写
alert(s.substring(3,8)) 从第三个位置截取到第八个位置
alert(s.substr(3,8)); 从第三个位置截取,截取八个字符长度。不写后面数字是截到最后。
s.split('') 将字符串按照指定字符拆开。
七.事件
例题解析:1.复选框按钮,下一步可用
<html> <head> <title>无标题文档</title> </head> <body> <input id="tong" type="checkbox" name="ch" ckecked="checked" value="1" onclick="ck_yes()")/> <label for="tong">同意</label><br /> <input type="button" value="下一步" id="btn" disabled="disabled"/> </body> </html> <script> function ck_yes(){ var btn = document.getElementById('btn'); if(btn.disabled){ document.getElementById('btn').removeAttribute('disabled'); }else document.getElementById('btn').setAttribute('disabled','disabled'); } </script>
2.两个下拉框互传内容
<html> <head> <title>无标题文档</title> </head> <body> <select multiple="multiple" size="7" id="slt" > <option>abc</option> <option>123</option> <option>asd</option> <option>bcd</option> <option>def</option> </select> <input type="button" value="左移" onclick="left()"/> <input type="button" value="右移" onclick="right()"/> <select multiple="multiple" size="7" id="slt_r" > <option value="时间">时间</option> <option value="日期">日期</option> <option value="年月">年月</option> <option value="东西">东西</option> <option value="南北">南北</option> </select> </body> </html> <script> function left(){ var slt = document.getElementById('slt'); var slt_r = document.getElementById('slt_r'); var opt1 = slt_r.options[slt_r.selectedIndex]; slt.appendChild(opt1); } function right(){ var slt=document.getElementById('slt'); var slt_r=document.getElementById('slt_r'); var opt = slt.options[slt.selectedIndex]; slt_r.appendChild(opt); } </script>
3.三个下拉框日期选择
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id='year' onchange="addDay()"></select> <select id="month" onchange="addDay()"></select> <select id="date"></select> </body> </html> <script> var year_slt = document.getElementById('year'); var month_slt = document.getElementById('month'); var day_slt = document.getElementById('date'); var now = new Date(); now_year = now.getFullYear(); for(var i = now_year; i >= now_year - 70; i--) { var opt_year = document.createElement('option'); opt_year.value = i; opt_year.innerText = i; year_slt.appendChild(opt_year); } for(var i = 1; i <= 12; i++) { var opt_month = document.createElement('option'); opt_month.value = i; opt_month.innerText = i; month_slt.appendChild(opt_month); } function isRun(year) { if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) { return 29; } else { return 28 } } function addDay() { day_slt.innerHTML = ''; if(month_slt.value == 1 || month_slt.value == 3 || month_slt.value == 5 || month_slt.value == 7 || month_slt.value == 8 || month_slt.value == 10 || month_slt.value == 12) { for(var i = 1; i <= 31; i++) { var day = document.createElement('option'); day.value = i; day.innerText = i; day_slt.appendChild(day); } } else if(month_slt.value == 4 || month_slt.value == 6 || month_slt.value == 9 || month_slt.value == 11) { for(var i = 1; i <= 30; i++) { var day = document.createElement('option'); day.value = i; day.innerText = i; day_slt.appendChild(day); } } else { for(var i = 1; i <= isRun(year_slt.value); i++) { var day = document.createElement('option'); day.value = i; day.innerText = i; day_slt.appendChild(day); } } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
文章题目:JavaScript中DOM操作方法小结
网站路径:https://www.cdcxhl.com/article12/pppidc.html
成都网站建设公司_创新互联,为您提供定制开发、网站策划、移动网站建设、网站收录、标签优化、Google
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联