JS特效

最新推荐文章于 2025-03-13 14:25:37 发布

junlingshiwo

最新推荐文章于 2025-03-13 14:25:37 发布

阅读量370

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/weixin_45722135/article/details/108198142

版权

JS 专栏收录该内容

17 篇文章

订阅专栏

一：DOM

《1文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。

《2 DOM又称文档树模型。

《3 DOM 常用操作：获取文档元素；对文档元素经行增删改查操作；事件操作。

《4 window和document两者，

document可以帮助我们拿到页面里面任何东西，比如它的常用属性：

 console.log(document===window.document);

   console.log(document);
   //  console.log(document.childNodes);
   //  console.log(document.head);
    // console.log(document.body);
    //document.title="测试";
    //console.log(document.title);

可以获取到它的头部，身体，节点等等。

《5 文档加载过程的方式：1 onload；2 onunload；

《6 文档页面元素获取：1 根据id获取元素； 2 根据标签名获取元素；3 根据 name获取元素； 4 根据选择器获取元素。

《7 节点之间关系：

实例：
我们所获取的就是父节点和兄弟节点。

《8 DOM节点操作：

1 CRDD （增删改查）

创建节点（createElement）：我们针对此标签来增删改查

我们为标签创建一张图片：

红线所标出就是在js中来创建创建照片，来创建节点。

删除节点：想删除盒子中任意的节点，可通过两种方式：

我们拿到盒子中的按钮，想删除有两种，红线是一种，黄线是第二种。

克隆标签：

浅克隆只克隆当前元素本身，不会克隆里面子元素的，深克隆则相反，

2 节点属性：1 获取：getAttribute（名称）；2 设置：SetAttribute（名称，值）； 3 删除： removeAttribute（名称）。

案例：子节点属性操作

<body>
<div class="box">
    <p class="word">撩课</p>
    <button class="btn">点我</button>
    <img/>
</div>

<script >
    window.onload=function (ev) {
        // 1获取节点
        var img=document.getElementsByTagName('img')[0];
        console.log(img);

        // 2获取标签属性
        console.log(img.getAttribute('src'));
        console.log(img.getAttribute('alt'));
        console.log('alt');
        console.log('src');

        // 3 设置属性
        img.setAttribute('src','img/img_01.jpg');
        //img.setAttribute('alt','这是风景');
        // img.setAttribute('itlike','撩课');
        //img.setAttribute('abc','cba');

        // 3 删除属性
        img.removeAttribute('abc');



    }
</script>

</body>
</html>

补充：

value,innerHtml,innerText的功能：

<1 value 用于表单类型的取值和赋值。

<2 innerText 内容在双标签之间的，作文本的取值，赋值。

<3 innerHtml 做标签文本共同的。

获取焦点：onfocus，失去焦点： onbcur。