JavaScript中 DOM操作方法小结

wonderfulideas

2019-01-10

关注关注

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.复选框按钮，下一步可用

&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;无标题文档&lt;/title&gt;
 
 &lt;/head&gt;
 
　　 &lt;body&gt;
 &lt;input id="tong" type="checkbox" name="ch" ckecked="checked" value="1" onclick="ck_yes()")/&gt;
 &lt;label for="tong"&gt;同意&lt;/label&gt;&lt;br /&gt;
 &lt;input type="button" value="下一步" id="btn" disabled="disabled"/&gt;
 
 &lt;/body&gt;
&lt;/html&gt;
&lt;script&gt;
 function ck_yes(){
 var btn = document.getElementById('btn');
 if(btn.disabled){
 document.getElementById('btn').removeAttribute('disabled');
 }else
 document.getElementById('btn').setAttribute('disabled','disabled'); 
 }
&lt;/script&gt;

2.两个下拉框互传内容

&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;无标题文档&lt;/title&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;select multiple="multiple" size="7" id="slt" style="width: 200px; height: 200px;"&gt;
 &lt;option&gt;abc&lt;/option&gt;
 &lt;option&gt;123&lt;/option&gt;
 &lt;option&gt;asd&lt;/option&gt;
 &lt;option&gt;bcd&lt;/option&gt;
 &lt;option&gt;def&lt;/option&gt;
 &lt;/select&gt;
 &lt;input type="button" value="左移" onclick="left()"/&gt;
 &lt;input type="button" value="右移" onclick="right()"/&gt;
 &lt;select multiple="multiple" size="7" id="slt_r" style="width: 200px; height: 200px;"&gt;
 &lt;option value="时间"&gt;时间&lt;/option&gt;
 &lt;option value="日期"&gt;日期&lt;/option&gt;
 &lt;option value="年月"&gt;年月&lt;/option&gt;
 &lt;option value="东西"&gt;东西&lt;/option&gt;
 &lt;option value="南北"&gt;南北&lt;/option&gt;
 &lt;/select&gt;
 &lt;/body&gt;
&lt;/html&gt;
&lt;script&gt;
 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); 
 }
&lt;/script&gt;

3.三个下拉框日期选择

&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
&lt;select id='year' onchange="addDay()"&gt;&lt;/select&gt;
 &lt;select id="month" onchange="addDay()"&gt;&lt;/select&gt;
 &lt;select id="date"&gt;&lt;/select&gt;
 &lt;/body&gt;
&lt;/html&gt;
&lt;script&gt;
 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 &gt;= 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 &lt;= 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 &amp;&amp; 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 &lt;= 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 &lt;= 30; i++) {
 var day = document.createElement('option');
 day.value = i;
 day.innerText = i;
 day_slt.appendChild(day);
 }
 } else {
 for(var i = 1; i &lt;= isRun(year_slt.value); i++) {
 var day = document.createElement('option');
 day.value = i;
 day.innerText = i;
 day_slt.appendChild(day);
 }
 }
 }
&lt;/script&gt;

原文链接：http://www.cnblogs.com/bekeyuan123/p/6734360.html?utm_source=tuicool&utm_medium=referral

作者：资源库

JavaScript中 DOM操作方法小结