JavaScript中 DOM操作方法小结

2024-05-06 15:18:03

字体：大中小

来源：转载

供稿：网友

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>

上一篇：如何在 Vue.js 中使用第三方js库

下一篇：完美解决UI-Grid表格元素中多个空格显示为一个空格的问题