- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>DOM 对象</title>
- </head>
- <body>
- <ul id="Ul">
- <li name="text" title="第 1 条">1</li>
- <li>2</li>
- <li name="text" title="第 3 条">3</li>
- <li>4</li>
- <li name="text" title="第 5 条">5</li>
- <li name="text" title="第 6 条">6</li>
- </ul>
- <br />
- <input type="button" onclick="getnum()" value="getElementById" />
- <input type="button" onclick="getnum1()" value="getElementsByName" />
- <input type="button" onclick="getnum2()" value="getElementsByTagName" />
- <input type="button" onclick="getnum3()" value="getAttribute" />
- <input type="button" onclick="getnum4()" value="setAttribute" />
- <script type="text/javascript">
- // getElementById() 通过指定 ID 获取元素 唯一
- function getnum(){
- var mynode = document.getElementById('Ul');
- mynode.style.backgroundColor="#ccc";
- }
- // getElementsByName() 通过元素名称 name 属性获得元素 集合
- function getnum1() {
- var mynode = document.getElementsByName('text');
- alert(mynode.length);
- for(var i=0; i<=mynode.length; i++){
- mynode[i].style.color="blue";
- }
- }
- // getElementsByTagName() 通过标签名称获得元素 集合
- function getnum2(){
- var mynode = document.getElementsByTagName('li');
- alert(mynode.length);
- for(var i=0; i<mynode.length; i++){
- mynode[i].style.backgroundColor="#f00";
- }
- }
- // getAttribute() 通过元素节点的属性名称获取属性的值
- function getnum3(){
- var mynode = document.getElementsByTagName('li');
- for(var i=0; i<mynode.length; i++){
- var text = mynode[i].getAttribute('title');
- if(text != null){
- alert(text);
- }
- }
- }
- // setAttribute() 增加一个指定名称和值的新属性, 或者把一个现有的属性设定为指定的值
- function getnum4(){
- var mynode = document.getElementsByTagName('li');
- mynode[1].setAttribute('title','第 2 条')
- }
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title > 节点</title>
- </head>
- <body>
- <ul id="text"><li > 第一条数据 </li><li > 第二条数据</li><li id="s"> 第三条数据</li><li > 第四条数据</li></ul>
- <input type="button" onclick="txt()" value="childNodes">
- <input type="button" onclick="txt2()" value="firstChild">
- <input type="button" onclick="txt3()" value="lastChild">
- <input type="button" onclick="txt4()" value="firstChild">
- <input type="button" onclick="txt5()" value="nextSibling">
- <input type="button" onclick="txt6()" value="previousSibling">
- <input type="button" onclick="txt7()" value="appendChild">
- <input type="button" onclick="txt8()" value="insertBefore">
- <input type="button" onclick="txt9()" value="removeChild">
- <input type="button" onclick="txt10()" value="replaceChild">
- <input type="button" onclick="txt11()" value="createElement">
- <input type="button" onclick="txt12()" value="createTextNode">
- <script>
- var Ul = document.getElementById('text');
- var Li = document.createElement('li');
- var S = document.getElementById('s');
- // childNodes 访问选定元素节点下的所有子节点的列表 数组
- var child = Ul.childNodes;
- function txt(){
- alert(len.length);
- }
- // firstChild 属性返回 childNodes 数组的第一个子节点
- function txt2(){
- Ul.firstChild.style.color="red";
- }
- // lastChild 属性返回 childNodes 数组的最后一个子节点
- function txt3(){
- Ul.lastChild.style.color="blue";
- }
- // parentNode 获取指定节点的父节点
- function txt4(){
- var Li = document.getElementsByTagName('li');
- alert(Li[0].parentNode.nodeName);
- }
- // nextSibling 属性可返回某个节点之后紧跟的节点
- function txt5(){
- S.nextSibling.style.borderBottom = '1px solid #000';
- }
- // previousSibling 属性可返回某个节点之前紧跟的节点
- function txt6(){
- S.previousSibling.style.borderBottom = '1px solid #f00';
- }
- // appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点
- function txt7(){
- Li.innerHTML = "插入第五条数据";
- Ul.appendChild(Li);
- }
- // insertBefore() 在指定的已有子节点之前插入新的子节点
- function txt8(){
- Li.innerHTML = "指定节点插入";
- Ul.insertBefore(Li,child[1]);
- }
- // removeChild() 从子节点列表中删除某个节点如删除成功, 此方法可返回被删除的节点, 如失败, 则返回 NULL
- function txt9(){
- Ul.removeChild(child[0])
- }
- // replaceChild() 用新节点替换某个子节点
- function txt10(){
- var textnode=document.createTextNode('新内容');
- child[0].replaceChild(textnode,child[0].childNodes[0]);
- }
- // createElement 创建元素节点
- function txt11(){
- var li=document.createElement('li');
- li.innerHTML = "创建元素";
- Ul.appendChild(li);
- }
- // createTextNode 创建新的文本节点
- function txt12(){
- var textnode=document.createTextNode('新内容');
- child[0].replaceChild(textnode,child[0].childNodes[0]);
- }
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <style>
- .on{ color:#f00;}
- #txt> div{ display: none;}
- #txt .show{ display:block;}
- </style>
- </head>
- <body>
- <ul id="tab">
- <li class="on">选项一</li>
- <li > 选项二</li>
- <li > 选项三</li>
- </ul>
- <div id="txt">
- <div class="show">选项一内容</div>
- <div > 选项二内容</div>
- <div > 选项三内容</div>
- </div>
- <script>
- var Txt=document.getElementById('txt');
- var Li=document.getElementsByTagName('li');
- var oDiv=Txt.getElementsByTagName('div');
- for(var i=0; i<Li.length; i++){
- Li[i].index=i;
- Li[i].onclick=function(){
- for(var j=0; j<Li.length; j++){
- Li[j].className="";
- oDiv[j].className='';
- }
- this.className="on";
- oDiv[this.index].className="show";
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/12367/76af575336f1b2d6db0e3fd7ae4b49f2.html