JavaScript中 DOM操作方法

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" οnclick="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');}elsedocument.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="左移" οnclick="left()"/><input type="button" value="右移" οnclick="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' οnchange="addDay()"></select><select id="month" οnchange="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操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天--2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
前端技术学习第四讲：JavaScript中DOM和BOM
JavaScript中DOM和BOM 一.DOM和BOM DOM:文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与 ...
jQuery中DOM操作方法之 html,text,val
jQuery内核 DOM操作方法之 html,text,val 回顾下几组DOM插入有关的方法 innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对 ...
Javascript中DOM技术的的简单学习
第十四课 DOM技术概述 1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构 ...
JavaScript中DOM的层次节点(一)
DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...
js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null． ...
[JavaScript]关于JavaScript中DOM对象的使用
DOM对象是个好东西. 通过 HTML DOM,可以访问 JavaScript HTML 文档的所有元素. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model, ...

JavaScript中 DOM操作方法

JavaScript中 DOM操作方法相关推荐

最新文章

热门文章