DOM模型

来源：互联网发布：sql server 2005 xp版编辑：程序博客网时间：2024/06/05 16:20

DOM:文档对象模型（Document Object Model）

通过DOM可以动态的改变文档内容

动态改变文档内容的原理：

解析文档（如HTML）并生成DOM树

通过DOM标准接口+编程语言改变文档内容

DOM树的生成：

DOM树种的节点类型和节点关系：

DOM的操作：

一查看节点【访问指定节点的方法：

        1.getElementById

           例: var d=document.getElementById('d');

               d.innerText='23333';

               <div id="d"></div>
                效果：div中添加了内容'23333',如图：
                     
2.getElementsByName

           例：var abc=document.getElementsByName('abc');              <a href="1-核心DOM.html" name="abc">2333</a>
              abc[0].innerText='66666';
              效果：a标签内的内容'2333'变成'66666'
3.getElementsByTagName

   例：var span=document.getElementsByTagName('span')              span[0].innerText='55555';
              <span></span>
             效果：span标签内添加了内容'55555',如图：
                  
4.getElementsByClassName

           例：var c=document.getElementsByClassName('c');

              //通过for循环找到所有的class名字为c的标签              for(var i=0;i< c.length;i++){              c[i].innerText='88888';
      <p class="c">7777777</p>              <p class="c">7777777</p>
              效果：找到所有的class名字为c的标签，标签的内容全部变为'88888'】

二创建和增加节点【创建和增加节点的方法：

1.createElment()：创建节点

例： //创建一个节点(括号内为节点的标签名字),只是创建，并未添加内容和属性

vara=document.createElement('a');

              a.href='https://www.baidu.com/?tn=57095150_2_oem_dg';              a.innerText='click';              //添加元素              d.appendChild(a);

              效果相当于<a href="https://www.baidu.com/?tn=57095150_2_oem_dg">click</a>

2.appendChild():末尾追加方式插入节点

3.insertBefore():在指定节点前插入新节点

例：varp=document.createElement('p');

               p.innerText='23333';               d.appendChild(p);               //参数1：要添加的元素  ， 参数2：指定节点               d.insertBefore(p,a);

      效果：新的标签p添加在a标签之前

4.cloneNode():克隆节点

例：

             var spanclone=span.cloneNode(true);//true:克隆里面的内容

                                                  false或是不加：只克隆标签，无内容             s.appendChild(spanclone);

             <span id="s">你一定要是个孩子</span>
      效果：克隆一个span
】

三删除和替换节点

查看节点

完整的节点层次的HTML文件：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script>        window.onload= function () {           //通过id找到所在的td            var t1=document.getElementById('t1');            //获取td的父节点元素tr            var tr=t1.parentNode;            tr.style.backgroundColor='blue';            //获取所得父节点tr的第一个子元素节点            var t2=tr.firstElementChild;            t2.innerText='111';            //获取所得父节点tr的最后一个子元素节点            var t3=tr.lastElementChild;            t3.innerText='333';            //获取所的节点tr的第二个子元素节点，通过第三个子元素找前一个节点找到第二个子元素节点            var t4=t3.previousElementSibling;            t4.innerText='222';            //获取所的节点tr的第二个子元素节点，通过第一个子元素找后一个节点找到第二个子元素节点            var t4=t2.nextElementSibling;            t4.innerText='2222';        }    </script></head><body><table>    <tr>        <td>1</td>        <td>2</td>        <td>3</td>    </tr>    <tr>        <td id="t1">1</td>        <td>2</td>        <td>3</td>    </tr></table></body></html>

完整的查看节点的html文件：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script>        /*文档就绪函数*/        window.onload=function(){            var d=document.getElementById('d');            /*添加文本信息*/           // d.innerHTML='23333';   //可以添加标签，文本信息            d.innerText='23333';   //只能添加文本信息            var abc=document.getElementsByName('abc');            /!*通过下标得到对应元素*!/            abc[0].innerText='66666';//getElementsByName中的Elements表明元素不只有一个，

                                        所以通过下标[0]找到第一个元素            /!*通过标签名字得到对应元素*!/            var span=document.getElementsByTagName('span')            span[0].innerText='55555';            /!*通过class得到对应元素*!/            var c=document.getElementsByClassName('c');            for(var i=0;i< c.length;i++){                c[i].innerText='88888';            }        }    </script></head><body><div id="d"></div><a href="1-核心DOM.html" name="abc">2333</a><span></span><p class="c">7777777</p><p class="c">7777777</p></body></html>

效果如图：

创建和增加节点的完整HTML文件：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script>        window.onload=function(){            var d=document.getElementById('d');            //创建一个节点(括号内为节点的标签名字),只是创建，并未添加内容和属性            var a=document.createElement('a');            a.href='https://www.baidu.com/?tn=57095150_2_oem_dg';            a.innerText='click';            //添加元素            d.appendChild(a);            //在指定节点前插入新节点            var p=document.createElement('p');            p.innerText='23333';            d.appendChild(p);            //参数1：要添加的元素  ， 参数2：指定节点            d.insertBefore(p,a);            //获取目标元素            var span=document.getElementById('s');            //克隆新元素            var spanclone=span.cloneNode(true);//true:克隆里面的内容  false或是不加：只克隆标签，无内容            s.appendChild(spanclone);        }    </script></head><body><div id="d"></div><span id="s">你一定要是个孩子</span></body></html>
效果如图：
修改节点的完整HTML文件：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script>        /*文档就绪函数，文档加载完后才出现效果*/        window.onload=function(){            //通过id找到对应元素            var d=document.getElementById('d');            //修改颜色（两种方式）            d.style.color='red';          d.style.cssText='color：yellow';           //字体加粗 +=增加新的样式，即样式是增加的 ，如果是=的话，只是显示最后的style样式，覆盖以前的所有样式            d.style.cssText+='font-weight:bold';            //字体大小            d.style.cssText+='font-size:large';            //添加类名            d.className='a';//添加class='a'          d.className+='a';//class变成'aa'
                  }    </script></head><body><div id="d">    空白格</div></body></html>

阅读全文

0 0