Posted in Javascript onApril 25, 2017
DM是(Document Object Model)的简称。
一.找元素
- document.getElementById() 根据id选择器找，最多找一个；
- document.getElementsByName() 根据name找，找出的是数组；
- document.getElementsByclassName() 根据类选择器找，找出的也是数组；
- document.getElementsByTagName() 根据标签名找，找出的是数组；
二.获取内容
- 非表单元素：alert(a.innerHTML);获取代码和内容，但只显示内容。
- alert(a.innerText);提取代码和内容。
- 表单元素：alert(a.value); 获取input中的value值。
三.操作属性
- a.setAttribute("属性名","属性值")； 添加或更改一个属性。
- a.getAtrribute("属性名")；获取属性的值。
- a.removeAttribute("属性名")； 移除属性。
四.设置样式
var a = document.getElementsByClassName("a");
a[o].style.background-color="red"; //(只能取钳在body里边的)
五.相关元素操作
- var b = a.nextSibling; 找a的下一个同辈元素，注意包含空格。
- var b = a.previousSibling, 找a的上一个同辈元素，包含空格。
- var b = a.parentNode, 找a的上一级父级元素。
- var b = a.firstChild, 第一个元素； lastChild 最后一个; childNodes[n]找第n个；
五.元素的创建、添加、删除
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('') 将字符串按照指定字符拆开。
七.事件
- onclick: 鼠标单击触发
- ondblclick: 鼠标双击触发
- onmouseover：鼠标移动到上面触发
- onmouseout：鼠标离开时触发
- onmousemove：鼠标在上面移动时触发
- onchange：只要内容改变触发
- onblur：失去焦点时触发
- onfocus：获得焦点时触发
- onkeydown：按键按下时触发
- onkeyup：按键抬起时触发
- onkeypress: 在用户按下并放开任何字母数字键时发生，但是系统按钮（例：箭头键、功能键）无法识别
例题解析：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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
JavaScript中 DOM操作方法小结
- Author -
yinyanlei声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@