JavaScript中 DOM操作方法小结

2024-10-06 04:28:20

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基于DOM操作实现简单的数学运算功能示例

本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
AngularJS中的DOM操作用法分析

本文实例讲述了AngularJS中的DOM操作用法.分享给大家供大家参考,具体如下: 在angular中使用第三方插件时最好都封装到指令(directives)中去,DOM操作也最好都解构到指令中. 避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素.你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 directives. 如果你感到很难改变习惯,那么考虑从你的网页中移除 jQuery 吧.真的,AngularJS 中
js对象关系图方便dom操作

js对象关系图 JavaScript 对象参考手册本参考手册描述每个对象的属性和方法,并提供实例. Array Boolean Date Math Number String RegExp Global Browser 对象参考手册本参考手册描述每个对象的属性和方法,并提供实例. Window Navigator Screen History Location HTML DOM 对象参考手册本参考手册描述每个对象的属性和方法,并提供实例. Document Anchor Area Base
Javascript里使用Dom操作Xml

看了一天的XML资料,感觉CSDN上这篇讲的挺细致的.即有Dot Net写入XML文件的示例,又有JS读取的示例,值得一看.(Source:http://blog.csdn.net/flypigluo) 一．本笔记使用的Xml文件二．IXMLDOMDocument/DOMDocument简介 2．1 属性 2．1．1 parseError 2．1．2 async. 2．1．3 xml 2．1．4 text3 2．1．5 attributes 2．1．6 nodeName
javascript中HTMLDOM操作详解

一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 1)通过id查找元素(document.getElementById();) <div id="d" ></div> var x=document.getElementById("d"); 2)通过标签名查找元素 <div id="m"></div
JavaScript DOM操作表格及样式

一操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe
简单实现JS对dom操作封装

这篇文章主要介绍了JS简单实现对dom操作封装,下面就直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
原生JS实现几个常用DOM操作API实例

原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o
JavaScript中 DOM操作方法小结

DM是(Document Object Model)的简称. 一.找元素 document.getElementById() 根据id选择器找,最多找一个: document.getElementsByName() 根据name找,找出的是数组: document.getElementsByclassName() 根据类选择器找,找出的也是数组: document.getElementsByTagName() 根据标签名找,找出的是数组: 二.获取内容非表单元素:alert(
javascript中DOM复选框选择用法实例

本文实例讲述了javascript中DOM复选框选择用法.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>复选框全选全清和反选</title> &l
JavaScript中Dom操作实例详解

本文实例讲述了JavaScript中Dom操作.分享给大家供大家参考,具体如下: 博主将按照增删改查的方式来介绍一下Dom的主要操作. 1.增加节点添加节点的操作主要分为3步: (1)创建要添加的新节点 (2)找到要添加到的父节点 (3)父节点添加新节点参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Com
JavaScript中DOM操作常用事件总结

目录常用事件演示得到焦点和失去焦点演示鼠标划过和离开点击事件 load加载页面事件 onkeyup 键盘弹起事件内容变化事件选中时触发上一篇聊了如何同JavaScript获得页面元素,而获得页面元素的的目的就是操作这个元素的一行为,而这个行为是通过某个条件进行触发的.而这个一系列在JavaScript中称之为事件. 由此可以看出事件分三个部分: 事件源头: 也就是要操作的元素是谁. 事件类型: 也就是事件触发条件,比如鼠标点击以及鼠标滑过等. 事件处理: 如果触发了这个行为,如何
JavaScript中DOM详解

为了达到平稳退化,向后兼容,标记分离的思想,每次写js代码时做的第一件事应该是必要的测试和检查工作: 在js文件里首先添加以下代码进行检查: window.onload = function(){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementsByClassName) return false; if(!docu
JavaScript中操作字符串小结

最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一. 这些题有一个特点,站在考官的角度去考虑,它考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的情况下,用比较简洁的方式写出答案来. 可惜的是,很多开发人员,当然我也是其中一员,对于很多经常用到的字符串处理函数却不能牢牢记住他们的用法,总不得不去求助于XX手册或者
JavaScript中常见陷阱小结

你所创建的所有函数都是区分大小写的单引号('字符串')和双引号("字符串")在JavaScript中没有特殊的区别,都可以用来创建字符串.但作为一般原则,大多数WEB开发者都选择使用单引号而不是双引号,因为XHTML规范要求所有XHTML属性值都必须使用双引号括起来. JavaScript不支持重载,在JavaScript中,脚本在执行时不会顾及函数定义时的参数,而是直接使用在作用域链中最后定义的那个函数.这意味着,相同名称的函数永远只存在一个实例闭包是与作用域相关的一个概念,它
Javascript中typeof 用法小结

在js里用到数组,比如多个名字相同(的)input, 若是动态生成(的), 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确(的)是 if( typeof(document.mylist.length) != "undefined" ) {} 或 if( !isNaN(document.mylist.length) ) {} typeof(的)运算数未定义,返回(的)就
详解Javascript中DOM的范围

前言为了让开发人员更方便地控制页面,DOM定义了"范围"(range)接口.通过范围可以选择文档中的一个区域,而不必考虑节点的界限(选择在后台完成,对用户是不可见的).在常规的DOM操作不能更有效地修改文挡时,使用范围往往可以达到目的.本文将详细介绍DOM范围,下面来一起看看吧. 创建范围 Document类型中定义了createRange()方法.在兼容DOM的浏览器中,这个方法属于document对象.使用hasFeature()或者直接检测该方法,都可以确定浏览器是否支持范围
理解javascript中DOM事件

首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. 标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. 最初我们给页面实现点击,就像下面这样的简单操作. 先定义一个块如<div id="weiyuzhou">微宇宙</div>,之后在<script type="text/javascript"></script>内部实现id为we

JavaScript中 DOM操作方法小结

相关推荐

随机推荐