JavaScript中 DOM操作方法小结


Posted in Javascript onApril 25, 2017

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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
js获取页面description的方法
May 21 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
ES6正则的扩展实例详解
Apr 25 #Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 #Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 #Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 #Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 #Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 #Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 #Javascript
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
将数组写入txt文件 var_export
2009/04/21 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
python多进程间通信代码实例
2019/09/30 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
社区七一党员活动方案
2014/01/25 职场文书
社区工作者个人总结
2015/02/28 职场文书
企业投资意向书
2015/05/09 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang