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 相关文章推荐
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
JavaScript原型链详解
Nov 07 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数组是否为空的代码
2011/09/08 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
js字符串处理之绝妙的代码
2019/04/05 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
python队列queue模块详解
2018/04/27 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
硕士研究生自我鉴定范文
2013/12/27 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
公司员工安全协议书
2014/11/21 职场文书
给朋友的道歉短信
2015/05/12 职场文书
如何写辞职信
2015/05/13 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
钱学森观后感
2015/06/04 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis