JavaScript中 DOM操作方法小结

时间：2021-05-26

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>

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章