dom操作

最新推荐文章于 2024-08-11 00:22:53 发布

前端菜鸡008

最新推荐文章于 2024-08-11 00:22:53 发布

阅读量131

点赞数

文章标签： dom

本文链接：https://blog.csdn.net/fghgfhhg/article/details/99608279

版权

dom操作

一事件

事件三要素

事件源 ,事件,事件驱动程序,主要就是操作节点.

dom节点的获得

document.getElementById("demo")//通过id获得;
document.getElementsByTagName("div");//通过标签获得
document.getElementsByClassName("a");//通过类名获得
//标签和类名获得的都是伪数组

二获取节点

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

jiedian.parentNode//获取父节点
//案例：通过子盒子设置父盒子的背景色。

三 innerHTML和innerText

innerHTML

插入可执行的标签,标签样式会被解析,用于动态生成页面元素;

innerText

插入文本内容,标签样式会被当做文本处理;


<body>
    <ul class="nav">
        <li class="nav-item">li1</li>
        <li class="nav-item">li2</li>
        <li class="nav-item">li3</li>
        <li class="nav-item">li4</li>
        <li class="nav-item">li5</li>
        <li class="nav-item">li6</li>
        <li class="nav-item">li7</li>
        <li class="nav-item">li8</li>
    </ul>

    <div class="box">
        w我是box
        <div class="inner-box">
            我是innerbox
        </div>
    </div>
    <script>
        // innerText  和  innerHTML  都是属性
        var box = document.getElementsByClassName('box')[0];
        var ulEl = document.getElementsByTagName('ul')[0];
        // 获取 box  标签内部的  所有文本
        // 双闭合标签里面的内容（不识别标签）。
        console.log(box.innerText);
        // 设置box标签 的内容 (覆盖之前的内容)
        box.innerText = '不凡学院';
        box.innerText = '<p>我是一个p标签</p>';
        // innerText 只会把内容当做文本来解析


        // innerHTML  会把 标签字符串  当做 html标签来解析
        // 拿的 双闭合标签里面的内容（识别标签）。
        console.log(ulEl.innerHTML);
        // 设置 覆盖!!!!
        // ulEl.innerHTML = '不凡学院';
        ulEl.innerHTML = '<p>我是一个p标签</p>'; // 解析标签

        // innerHTML 通常用来动态生成页面
    </script>
</body>