JavaScript中 DOM操作方法小结

更新时间：2017年04月25日 09:51:36 作者：yinyanlei

本篇文章主要介绍了JavaScript中 DOM操作方法小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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面向对象程序设计
本文主要给大家展示的是javascript面向对象程序设计的相关资料,需要的朋友可以参考下
2015-01-01
基本DOM节点操作
本文主要介绍了基本DOM节点操作，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript实现Fly Bird小游戏
这篇文章主要为大家详细介绍了JavaScript实现Fly Bird小游戏的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
js加减乘除精确运算方法实例代码
这篇文章主要给大家介绍了关于js加减乘除精确运算方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
Promise 链式调用原理精简示例
这篇文章主要为大家介绍了Promise 链式调用原理精简示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
jquery和js显示和隐藏div的几种方法对比整理
jQuery是基于JavaScript的一种框架。jQuery封装js和Ajax的功能，提供函数接口，简化js的操作。使用jquery来显示或者隐藏div真的很方便。
2023-02-02
JS实现合并两个数组并去除重复项只留一个的方法
这篇文章主要介绍了JS实现合并两个数组并去除重复项只留一个的方法,涉及JavaScript数组合并及去重的相关技巧,需要的朋友可以参考下
2015-12-12
JavaScript的内置对象Math和字符串详解
这篇文章主要为大家介绍了JavaScript的内置对象Math和字符串，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
微信小程序scroll-x失效的完美解决方法
在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动，但是在实际开发中会遇到各种问题，下面小编给大家带来了微信小程序scroll-x失效的完美解决方法,需要的朋友可以参考下
2018-07-07
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
最近有个需求是将jsp页面上的某一段代码块格式化成类似CSDN的代码块的样式，而且很多平台都使用了这样的功能，下面就为大家简单分享一下
2021-02-02

JavaScript中 DOM操作方法小结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具