- document.getElementById()
- document.getElementsByTagName()
DOM 设置样式
- ele.style.styleName=styleValue
- DOM innerhtml
获取文本标签内的内容
- <ul id="listweb">
- <li>JavaScript 基础 </li>
- <li>CSS 基础 </li>
- <li>HTML 基础 </li>
- </ul>
- var lis = document.getElementById("listWeb").getElementsByTagName("li");
- for(var i=0,len=lis.length;i<len;i++){
- console.log(lis[i].innerHTML);
- lis[i].innerHTML+='程序'; // 修改标签里面的内容
- }
- DOM className
- <ul id="listWeb">
- <li>JavaScript 基础 </li>
- <li><b>CSS 基础 </b></li>
- <li>HTML 基础 </li>
- </ul>
- var lis = document.getElementById("listWeb").getElementsByTagName("li");
- for(var i=0,len=lis.length;i<len;i++){
- console.log(lis[i].innerHTML);
- lis[i].innerHTML+='程序';
- lis[1].className = "current"; // 更改 class 的名字
- }
语法 获取自定义标签的属性
- ele.getAttribute("attrbute");
- var p = document.getElementById("text");
- console.log(p.getAttribute("class")) // 获取 class 属性
添加属性
p.setAttribute("data-color","red"); // 添加新属性
删除属性
p.removeAttribute("align");
鼠标事件
onload 页面加载时触发
onclick 鼠标点击时触发 onclick="alert("12313123")"
- var btn = document.getElementById("btn")
- btn.onclick = function(){
- this.className = "unlock"; // 改变 class 的样式的名字 class="lock" 变成 class="unlock"
- this.innerHTML = "解锁"; // 改变元素的名字 锁定变成解锁
- }
onmouseover 鼠标划过时触发 onmouseover="mounsoverFn()" 调用一个函数 function mounsoverFn(btn){btn.style.background="red";}
onmouseout 鼠标离开时触发 onmouseout="mounsoutFn()" 调用一个函数 function mounsoutFn(btn){btn.style.background="blue";}
例子:
- <input type="button" value="开始" onmouseover="mouseoverOn(this,'red')"
- onmouseout="mouseoutOut(this,'orange')">
- // this 对 div 的引用
- <input type="button" value="结束" onmouseover="mouseoverOn(this,'yellow')"
- onmouseout="mouseoutOut(this,'green')">
- function mounsoverFn(btn,bgcolor){btn.style.background=bgcolor;} function
- mounsoutFn(btn,bgcolor){btn.style.background=bgcolor;}
onfoucs 获得焦点时触发
onblur 失去焦点时触发
例子
onfocus 获得焦点
onblur 失去焦点
例子:
- .red{
- border:1px solid red;
- }
- span{
- display:none;
- }
- 姓名:<input type="text" id="inp" class="no"> <span id="tip"> 请输入您的姓名 </span>
- var hqsrk =document.getElementById('inp')
- tip = document.getElementById("tip");
- hqsrk.onfocus=function(){
- tip.style.display="block";
- tip.innerHTML="请输入您的姓名";
- }
- hqsrk.onblur=function(){
- var abc = this.value; // 用于获取文本框的值, value 用于获取表单元素的值
- if (abc.length==0) {
- tip.innerHTML="用户名不能为空"; // 更改 span 标签的内容
- inp.className="red"; // 更改样式名字 将 no 改成 red
- }else{
- tip.style.display="none";
- inp.className="no";
- }
- }
onchange 域的内容改变时触发, 改变你选择的内容
例子
- Windows.onload=it;
- function it(){
- var menu = document.getElementById('color'),
- div1 = document.getElementById('div');
- menu.onchange=function(){
- var bgcolor=this.value;
- //var bgcolor= menu.option[menu.selectedIndex].value;
- //document.write(bgcolor);
- if (bgcolor==0) {
- div1.style.background="#fff";
- }else{
- div1.style.background=bgcolor;
- }
- }
- }
onsubmit 表单中的确定按钮被点击时发生 事件加在 form 标签上的
onmousedown 鼠标按钮在元素上按下时触发
- box.onmousedown = function(){
- }
onmousemove 鼠标指针移动时发生
- box.onmousemove = function(){
- }
onmouseup 在元素上松开鼠标按钮时触发
- box.onmouseup = function(){
- }
onresize 调整浏览器窗口的大小时触发
- Windows.onresize = function(){
- }
onscroll 拖动滚动条滚动时触发
- Windows.onscroll= function(){
- }
键盘事件
onkeydown 在用户按下一个键盘按键时发生
onkeypress 在按下键盘时发生 (只会响应字母与数字符号)
onkeyup 在键盘按键被松开时发生
keyCode 返回 onkeydown onkeypress onkeyup 事件触发的键的值的字符代码
例子
- var text = document.getElementById("text"),
- tip = document.getElementById("tip"),
- zi = document.getElementById("zi")
- var zi_num = 30;
- document.onkeyup=function(){
- var len = text.value.length;
- var allow = zi_num-len;
- if(allow>=0){
- tip.innerHTML = "您还可以输入"+allow+"字";
- }else{
- tip.innerHTML = "您已超出"+Math.abs(allow)+"字";
- }
- }
DOM 总结
来源: http://www.bubuko.com/infodetail-2776698.html