JavaScript

超轻量级php框架startmvc

首页 JavaScript JavaScript中 DOM操作方法小结

JavaScript中 DOM操作方法小结

更新时间：2020-05-08 13:42:01 作者：startmvc
DM是(DocumentObjectModel)的简称。一.找元素document.getElementById()   根据id选择器

DM是(Document Object Model)的简称。

一.找元素

  1. document.getElementById()    根据id选择器找，最多找一个；
  2. document.getElementsByName()   根据name找，找出的是数组；  
  3. document.getElementsByclassName()  根据类选择器找，找出的也是数组；
  4. document.getElementsByTagName()   根据标签名找，找出的是数组；

二.获取内容

  1. 非表单元素：alert(a.innerHTML);获取代码和内容，但只显示内容。
  2.  alert(a.innerText);提取代码和内容。
  3. 表单元素：alert(a.value);  获取input中的value值。

三.操作属性

  1. a.setAttribute("属性名","属性值")；   添加或更改一个属性。
  2. a.getAtrribute("属性名")；获取属性的值。
  3. a.removeAttribute("属性名")； 移除属性。

四.设置样式


var a = document.getElementsByClassName("a");

a[o].style.background-color="red"; //(只能取钳在body里边的)

五.相关元素操作

  1. var b = a.nextSibling;    找a的下一个同辈元素，注意包含空格。
  2. var b = a.previousSibling, 找a的上一个同辈元素，包含空格。
  3. var b = a.parentNode,     找a的上一级父级元素。
  4. 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('')  将字符串按照指定字符拆开。

七.事件

  1. onclick: 鼠标单击触发
  2. ondblclick: 鼠标双击触发
  3. onmouseover：鼠标移动到上面触发
  4. onmouseout：鼠标离开时触发
  5. onmousemove：鼠标在上面移动时触发
  6. onchange：只要内容改变触发
  7. onblur：失去焦点时触发
  8. onfocus：获得焦点时触发
  9. onkeydown：按键按下时触发
  10. onkeyup：按键抬起时触发
  11. 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操作 javascript dom javascript中dom
文章分类
相关文章

JavaScript中 DOM操作方法小结