JavaScript中DOM操作方法小结

DM是(Document Object Model)的简称。

创新互联公司自2013年起，公司以成都网站设计、成都网站制作、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户上千多家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。

一.找元素

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.复选框按钮，下一步可用 

  
  
  
  
  
　　 
     
     同意

     
    
  

2.两个下拉框互传内容

  
  
  
  
  
    
      abc
      123
      asd
      bcd
      def
    
    
    
    
      时间
      日期
      年月
      东西
      南北
    
  

3.三个下拉框日期选择

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。