DM是(Document Object Model)的简称。
一.找元素
二.获取内容
三.操作属性
四.设置样式
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" style="width: 200px; height: 200px;">
<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" style="width: 200px; height: 200px;">
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
