JavaScript（webApi）

Bertha 。 2023-10-01 12:54 26阅读 0赞

**目录**

一，事件

1. 事件源

2. 事件类型:

3. 事件处理程序:

二，获取元素

1.querySelector

2.querySelectorAll

三，操作元素

1.获取元素内容

四，操作结点

1.创建结点

2.将结点插入到dom树中

3.使用 insertBefore 将节点插入到指定节点之前

4.删除结点

--------------------

### 一，事件 ###

#### 1. 事件源 ####

哪个元素触发的

#### 2. 事件类型: ####

是点击, 选中, 还是修改?

#### 3. 事件处理程序: ####

进一步如何处理. 往往是一个回调函数

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAb2hhbmHvvIE_size_20_color_FFFFFF_t_70_g_se_x_16][]

### 二，获取元素 ###

#### 1.querySelector ####

基本语法：

var element = document.querySelector(selectors);

*  selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString，该字符串必须是有效的
 *  CSS选择器字符串；如果不是，则引发 SYNTAX\_ERR 异常
 *  表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.
 *  如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()
 *  可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素

<body>
        <div>ttl&wjxbb</div>
    </body>
    <script>
        var div = document.querySelector("div");
        console.log(div);
    </script>

#### 2.querySelectorAll ####

基本语法：

var element = document.querySelectorAll(selectors);

示例：

<body>
        <div>ttl&wjxbb</div>
        <span>张三</span>
        <span>李四</span>
        <span>王五</span>
    </body>
    <script>
        var div = document.querySelector("div");
        console.log(div);
        var span = document.querySelectorAll("span");
        // 1.querySelectorAll返回的是一个数组，因此需要遍历
        for(let i = 0;i < 3;i++){
            console.log(span[i]);
        }
        // 2.遍历数组的方式2
        for(let e of span){
            console.log(e);
        }
    </script>

### 三，操作元素 ###

#### 1.获取元素内容 ####

**innerText（一般不用，因为如果修改的里面有标签，不会识别标签）**

**基本语法：**

// 读操作
    var renderedText = HTMLElement.innerText;
    // 写操作
    HTMLElement.innerText = string;

<body>
        <div>这是示例内容1</div>
    </body>
    <script>
        var div = document.querySelector("div");
        div.innerText = "这是示例修改后的内容";
    </script>

innerHTML

基本语法：

// 读操作
    var content = element.innerHTML;
    // 写操作
    element.innerHTML = htmlString;

<body>
        <div>这是示例内容1</div>
    </body>
    <script>
        var div = document.querySelector("div");
        div.innerText = "<span>这是示例修改后的内容2<span>";
        div.innerHTML = "<span>这是示例修改后的内容2<span>";
    </script>

2.修改元素属性

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 白天模式：白底黑字 */
            .day {
                background-color: white;
                color: black;
            }
            /* 夜间模式：黑底白字，js中来使用 */
            .black {
                background-color: black;
                color: white;
            }
        </style>
    </head>
    <body>
        <img src="rose.jpg" alt="" style="width: 100px; height: 100px;">
        <p>点我试试呀</p>
        <span class="day">这是要切换的内容</span>
    </body>
    <script>
        //获取img元素
        var img = document.querySelector("img");
        //console.dir表示，将一个对象中的属性、方法打印出来
        console.dir(img);
        //可以获取该元素中的属性，同样也可以设置为想要的值
        //直接修改为head.jpg:页面加载时，最开始是玫瑰花，但马上执行js代码就修改为头像路径了
        // img.src = "head.jpg";//此时，只看到头像
        //点击图片，切换为另一张: 绑定点击事件
        img.onclick = function(){
            //对象src属性保持的是绝对路径，我们用包含来判断
            if(img.src.lastIndexOf("rose.jpg") != -1){
                img.src = "head.jpg";
            }else{
                img.src = "rose.jpg";
            }
        }
        //p标签，点击后修改颜色
        var p = document.querySelector("p");
        p.onclick = function(){
            var color = p.style.color;//获取p标签文本颜色，刚开始没有值（显示的时候默认黑色）
            if(color == '' || color == "black"){
                //css属性中-间隔的，js中为style属性.驼峰式css属性
                p.style.color = "red";
                p.style.fontSize = "2em";//1个em为默认的一个字体大小
            }else{
                p.style.color = "black";
                p.style.fontSize = "1em";
            }
        }
    
        //span标签，点击切换模式：因为模式设置的css样式可能比较多，所以切换class类更方便
        var span = document.querySelector("span");
        span.onclick = function(){
            //获取当前点击时的class
            //<span class="">标签中的class属性，在js的元素对象属性对应为className，因为class在js中是关键词
            var cls = span.className;
            if(cls == "day"){
                span.className = "black";
            }else{
                span.className = "day";
            }
        }
    </script>
    </html>

### 四，操作结点 ###

#### 1.创建结点 ####

基本语法：

var element = document.createElement(tagName[, options]);

示例：创建一个div结点

<div class="container">
    </div>
    <script>
    var div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
    div.innerHTML = 'hehe';
    console.log(div);
    </script>

#### 2.将结点插入到dom树中 ####

基本语法：

element.appendChild(aChild)

示例：

<div class="container">
    </div>
    <script>
    var div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
    div.innerHTML = 'hehe';
    var container = document.querySelector('.container');
    container.appendChild(div);
    </script>

#### 3.使用 insertBefore 将节点插入到指定节点之前 ####

基本语法：

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

注意：

*  insertedNode 被插入节点(newNode)
 *  parentNode 新插入节点的父节点
 *  newNode 用于插入的节点
 *  referenceNode newNode 将要插在这个节点之前
 *  如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾

<div class="container">
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
    </div>
    <script>
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '我是新的节点';
    var container = document.querySelector('.container');
    console.log(container.children);
    container.insertBefore(newDiv, container.children[0]);
    </script>

#### 4.删除结点 ####

基本语法：

oldChild = element.removeChild(child);

注意：

*  child 为待删除节点
 *  element 为 child 的父节点
 *  返回值为该被删除节点
 *  被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位置.
 *  如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAb2hhbmHvvIE_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/eb31f9cc9d1141e780090c1fc02d2cfd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAb2hhbmHvvIE=,size_20,color_FFFFFF,t_70,g_se,x_16

JavaScript（webApi）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读