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 拾漏补遗
Dec 27 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
JS实现的简单表单验证功能示例
Oct 13 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
微信小程序的引导页实现代码
Jun 24 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
php相当简单的分页类
2008/10/02 PHP
php中大括号作用介绍
2012/03/22 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
js Dialog 实践分享
2012/10/22 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
Python检测网站链接是否已存在
2016/04/07 Python
利用Python如何生成随机密码
2016/04/20 Python
python字符串的常用操作方法小结
2016/05/21 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
selenium+python环境配置教程详解
2019/05/28 Python
Python 使用多属性来进行排序
2019/09/01 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
JAVA和C++的区别
2013/10/06 面试题
英语教师岗位职责
2014/03/16 职场文书
验房委托书
2014/08/30 职场文书
总经理岗位职责范本
2015/04/01 职场文书
宿舍管理制度范本
2015/08/07 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
六五普法学习心得体会
2016/01/21 职场文书
世界文化遗产导游词
2019/08/07 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python