JS学习小结（构造函数原型与对象原型的关系、获取dom元素的常用方法、dom元素的增删改查） - JS学习笔记

首页 > 博客列表 > JS学习小结（构造函数原型与对象原型的关系、获取dom元素的常用方法、dom元素的增删改查）

博主信息

博文 20

粉丝 0

访问量 19980

专题推荐

更多>

1.构造函数原型与对象原型

构造函数是对象的生产工厂，生产出来的对象，其原型会指向构造函数的原型，对象的原型会从构造函数的原型继承成员（属性和方法），示例如下

function Obj(name,age){
    this.name = name;
    this.age = age;
}
const student1 = new Obj("张三",8);
console.log(student1);
console.log(student1 instanceof Obj);
Obj.prototype.banji = "三年级";
console.log(student1);
Obj.prototype.show = function(){
    return `学生${this.name}的年龄是${this.age}岁，目前上${this.banji}。`;
};
console.log(student1.show());

2.获取dom元素的常用方法

获取元素的常用方法一般有四种，通过css选择器，css属性选择器获取,通过id获取，通过标签元素获取。
示例如下

<title>
    跟着朱老师学php
</title>
<body>
    <ul>
        <li id="site">首页</li>
        <li class="lanmu">栏目1</li>
        <li class="lanmu">栏目2</li>
        <li class="lanmu">栏目3</li>
        <li class="lanmu">栏目4</li>
    </ul>
    <script>
        //通过标签元素获取，获取后用数组下标的方式调用某个元素
        let huoQu = document.getElementsByTagName("title");
        console.log(huoQu[0]);
        //通过id获取，直接调用,不检查id是否唯一，返回第一个
        huoQu = document.getElementById("site");
        console.log(huoQu);
        //通过css属性选择器，用数组索引号的方式调用某个元素
        huoQu = document.getElementsByClassName("lanmu");
        console.log(huoQu[2]);
        //通过css选择器，适用范围最广，既能用id也能用css属性，还能用标签
        huoQu = document.querySelectorAll(".lanmu");
        console.log(huoQu);
        huoQu = document.querySelectorAll("#site");
        console.log(huoQu[0]);
        huoQu = document.querySelectorAll("ul");
        console.log(huoQu[0]);
    </script>
</body>

3.dom元素的增删改查

一、dom元素的增加

方法①，通过父元素添加子元素的方法

1、创建元素要用createElement方法
2、给元素添加内容有两种方法，一种是innerHTML,一种是innerText
3、添加到页面中，要用appendChild方法，应用在其父元素上
示例如下

<body>
    <ul>
        <li id="site">首页</li>
        <li class="lanmu">栏目1</li>
        <li class="lanmu">栏目2</li>
        <li class="lanmu">栏目3</li>
        <li class="lanmu">栏目4</li>
    </ul>
    <script>
        const ul = document.querySelector("ul");
        const li = document.createElement('li');
        li.innerHTML = "<i>栏目5</i>";
        ul.appendChild(li);
        console.log(ul);
    </script>
</body>

方法②，通过父元素添加字符串的方法

1、需要使用 AdjacentHTML方法
2、AdjacentHTML()，方法有两个参数，第一个是插入位置，比如beforeEnd（结束标签之前）、afterBegin(开始标签之后),第二个参数是插入字符串
示例如下

<body>
    <ul>
        <li id="site">首页</li>
        <li class="lanmu">栏目1</li>
        <li class="lanmu">栏目2</li>
        <li class="lanmu">栏目3</li>
        <li class="lanmu">栏目4</li>
    </ul>
    <script>
        const ul = document.querySelector("ul");
        const li = document.createElement('li');
        let str = '<li class="lanmu">栏目5</li>';
        ul.insertAdjacentHTML("beforeEnd",str);
        console.log(ul);
    </script>
</body>

批量添加元素，需要使用文档片段或者字符串方式

文档片段方法为createDocumentFragment(),利用for循环将所有生成的元素挂载到文档片段上面，然后统一添加。
示例如下

<body>
    <ul>
        <li id="site">首页</li>
        <li class="lanmu">栏目1</li>
        <li class="lanmu">栏目2</li>
        <li class="lanmu">栏目3</li>
        <li class="lanmu">栏目4</li>
    </ul>
    <script>
        const ul = document.querySelector("ul");
        const frag = document.createDocumentFragment();
        for(let i=0;i<5;i++){
            const li = document.createElement('li');
            li.innerText = `栏目${i+5}`;
            frag.appendChild(li);
        }
        ul.appendChild(frag);
        console.log(ul);
    </script>
</body>

运算结果如下图所示

二、dom元素的修改

修改替换，使用的是replaceWith()方法
如果用父级方法，使用的是replaceChild(替换内容,被替换的子元素)

<body>
    <ul>
        <li id="site">首页</li>
        <li class="lanmu">栏目1</li>
        <li class="lanmu">栏目2</li>
        <li class="lanmu">栏目3</li>
        <li class="lanmu">栏目4</li>
    </ul>
    <script>
        const li3 = document.querySelector("li:nth-of-type(4)");
        let tiHuan = document.createElement('li');
        tiHuan.innerHTML = '这个栏目内容被替换';
        li3.replaceWith(tiHuan);
        console.log(li3);
    </script>
</body>

运算结果如图所示

三、dom元素的删除

使用父节点操作方法 removeChild()
示例如下

<body>
    <ul>
        <li id="site">首页</li>
        <li class="lanmu">栏目1</li>
        <li class="lanmu">栏目2</li>
        <li class="lanmu">栏目3</li>
        <li class="lanmu">栏目4</li>
    </ul>
    <script>
        const ul = document.querySelector("ul");
        const li3 = document.querySelector("li:nth-of-type(4)");
        ul.removeChild(li3);
    </script>
</body>

四、dom元素的遍历查找

//获取所有子元素
ul.children
//获取所有子元素的数量
ul.childElementCount

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html常用标签的用法汇总

2020-12-29 21:48:15