一、查找
第一种方式：依据id查找
var obj = document.getElementById(id); //document是HTMLDocument的实例
<html> <head> <script> function f1(){ var obj = document.getElementById('a1'); //双引号，单引号都可以 //innerHTML属性：可以访问或者设置节点的html的属性值 //alert(obj.innerHTML); obj.innerHTML = "为什么点我"; //双引号单引号都可以 } function f2(){ var obj = document.getElementById('d1'); alert(obj.innerHTML); } function f3(){ var obj = document.getElementById('username'); //value属性：可以获取文本输入框的值和改变值 alert(obj.value); //获得值 obj.value = 'abc';//改变值 } </script> </head> <body style="font-size:30px;font-style:italic;"> <!--javascript:; 表示是一个空白的js语句--> <a href="javascript:;" id="a1" onclick="f1();">click me</a><br/> <div id="d1" ><span>你好</span></div><br/> <input type="text" id="username" name="username"/><br/> <input type="button" value="点我吧" onclick="f3();"/> </body> </html>第二种方式var arr = node.getElementsByTagName('tagName');
<html> <head> <style> ul{ list-style-type:none; } ul li{ float:left; border:1px solid black; margin-left:10px; 100px; height:40px; background-color:red; cursor:pointer; } .selected{ background-color:#ff88ee; } </style> <script src="myjs.js"></script> <script> function doAction(index){ var arr = $('u1').getElementsByTagName('li'); for(i=0; i<arr.length; i++){ arr[i].className = ''; } var obj = $('l'+index); obj.className = 'selected'; } </script> </head> <body style="font-size:30px;"> <ul id="u1"> <li onmouseover="doAction(1);" id="l1">选项一</li> <li onmouseover="doAction(2);" id="l2">选项二</li> <li onmouseover="doAction(3);" id="l3">选项三</li> </ul> </body> </html>第三种方式使用遍历的方式（浏览器兼容性差）
二、创建parentNode
previousSibling 前一个兄弟
nextSibling 下一个兄弟
childNodes 所有子节点
firstChild 前一个子节点
lastChild 后一个子节点
遍历的方式因为有浏览器的兼容性问题，尽量少用
三、添加document.createElement(tagName); //tagName表示标记名
node.appendChild(obj); //作为最后一个孩子添加
node.insertBefore(obj, refNode); //添加到refNode的前面
四、删除node.replaceChild(obj, refNode); //替换refNode
五、样式node.removeChild(obj);
<html> <head> <script src="myjs.js"></script> <script> function f1(){ var obj = document.createElement('div'); obj.innerHTML = '兴趣最重要...'; obj.className = 's1'; // $('d1').appendChild(obj); // $('d1').insertBefore(obj, $('a1')); // $('d1').replaceChild(obj, $('a1')); $('d1').removeChild($('a1')); } </script> <style> .s1{ 200px; height:100px; background-color:red; } </style> </head> <body style="font-size:30px;" id="d1"> <!-- <a href="javascript:alert('hello');">如何学好java</a> --> <a id="a1" href="javascript:;" onclick="f1();">如何学好java</a> </body> </html>
第一种方式：修改节点的className属性
比如：var obj = document.getElementById('id1'); obj.className = 's1'; //使用s1样式 ****见例子：表单验证****
第二种方式：修改节点的style属性
1.必须是内联样式
2.如果要修改的样式属性名包括"-"，比如background-color,则要按照如下方式修改node.style.backgroundColor = 'red';
<html> <head> <style> #d1{ 80px; height:80px; background-color:blue; position:relative; } </style> <script src="myjs.js"></script> <script> function f1(){ var v1 = parseInt($('d1').style.left); $('d1').style.left = v1 + 50 + 'px'; } </script> </head> <body> <div id="d1" style="left:10px;"></div> <input type="button" value="click me" onclick="f1();"/> </body> </html>
如何禁止浏览器的两种默认行为：
点击连接，浏览器会向href属性指向的地址发请求
点击表单提交按钮，浏览器会提交表单
禁止的方式
<a href="" onclick="return false;"></a>
<from onsubmint="return false;"></form>