DOM模型

最新推荐文章于 2022-06-24 19:18:07 发布

ztt0918

最新推荐文章于 2022-06-24 19:18:07 发布

阅读量1.4k

点赞数

分类专栏： DOM模型文章标签： DOM模型

本文链接：https://blog.csdn.net/ztt0918/article/details/76014622

版权

DOM模型专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>