JavaScript中 DOM操作方法小结

前端之家收集整理的这篇文章主要介绍了JavaScript中 DOM操作方法小结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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("属性名"); 移除属性

四.设置样式

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

无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

  
<input id="tong" type="checkbox" name="ch" ckecked="checked" value="1" onclick="ck_yes()")/>
<label for="tong">同意

<input type="button" value="下一步" id="btn" disabled="disabled"/>

2.两个下拉框互传内容

无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

3.三个下拉框日期选择

<Meta charset="UTF-8">