标签的获取

最新推荐文章于 2024-07-24 10:40:52 发布

m0_56714054

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量105

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_56714054/article/details/130260759

版权

DOM：document object model，文档对象模型

D（document）：document的意思是文档，在dom中会将HTML这个页面给解析为一个文档，并在解析的同时会提供一个 document对象。

事件三要素：事件源：要操作的对象

事件：事件对象 click dbclick mousemove...

事件处理函数：干什么

事件源.on事件 = 事件处理函数

html文件里面的所有内容都是对象

每个标签都是对象，所有的标签作为对象去打印，里面的API几乎一样

 document.querySelector('.btn').onclick = btnClick;
        function btnClick(){
            console.log('点了一下');
        }
        console.log(typeof btnClick);

通过css选择器获取：documen querySelector

  <div class="box box1" id="mybox1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <span>我是span</span>

通过类名获取

通过id名获取

通过标签名获取

通过name属性值获取

  // 通过css选择器获取:document.querySelector("css选择器") 
        console.log(document.querySelector);
        console.log(document.querySelector(".box1"));
        console.dir(document.querySelector(".box1"));
        console.log(document.querySelector(".box"));//只能获取到第一个
        // document.querySelectorAll("css选择器")
        console.log(document.querySelectorAll(".box"));
        console.log(document.querySelectorAll(".box1"));

        console.log("=====通过类名获取");
        // 通过类名获取:document.getElementsByClassName("类名")
        console.log(document.getElementsByClassName("box1")[0]);
        console.log(document.getElementsByClassName("box"));

        console.log("=====通过id名获取");
        // document.getElementById("id名")
        console.log(document.getElementById("mybox1"));

        console.log("=====通过标签名获取");
        // document.getElementsByTagName("标签名")
        console.log(document.getElementsByTagName("div"));
        console.log(document.getElementsByTagName("span"));

        console.log("=====通过name属性获取");
        console.log("account: ",document.getElementsByName("account"));
        console.log(document.getElementsByName("hobby"));
        console.log(document.getElementsByName("hobby")[0]);
        console.log(document.getElementsByName("account")[0].value);

元素：标签

节点：标签(元素)、文本、注释

属性的增删改查：

let box1 = document.querySelector('.box1');

console.log(box1);

// 添加一个属性: 标签.setAttribute(属性名，属性值)

box1.setAttribute("newattr","添加的属性");

// 获取属性值: box1.getAttribute(属性名)

console.log(box1.getAttribute("newattr"));

console.log(box1.getAttribute("class"));

// 修改

box1.setAttribute("class",box1.getAttribute("class")+" myclass");

// 删除

// box1.removeAttribute("newattr");

// box1.removeAttribute("class");

// 点击按钮，删除box1的class

document.querySelector('button').onclick = function(){

box1.removeAttribute("class");

box1.innerHTML = "新内容";

}

console.log("直接对标签属性进行操作============");

// 修改：标签.属性 = "属性值";

let a = document.querySelector("a");

a.href = "http://www.baidu.com";

console.log(a.href);

let account = document.getElementsByName('account');

console.log(account);

account[0].value = "654321";

// 修改标签内容：标签.

box1.innerHTML = "<h2>标题2</h2>";

console.log(box1.innerHTML);

console.log(box1.innerText);

// box1.innerText = "<h2>标题2</h2>";

let checkBox = document.getElementsByName('hobby');

console.log(checkBox);

// checkBox[1].checked = "checked";

checkBox[1].checked = true;

// 标签.属性 = "属性值"; 不能用于设置标签类名

a.class = "mya";

console.dir(a);

标签类名的增删改查：

 let box1 = document.querySelector('.box1');
        // 查：获取类名
        console.dir(box1);
        console.log(box1.className);
        console.log(box1.classList);
        // 添加:标签.classList.add()
        box1.classList.add("newClass");
        // 替换: box1.classList.replace(oldclass,newclass)
        box1.classList.replace("box","mybox");

        // 标签是否包含某个类名
        console.log(box1.classList.contains("box1"));//true
        console.log(box1.classList.contains("adafsf"));//false
        // 删除类名
        box1.classList.remove("newClass");
        box1.classList.remove("box1");

        // 有对应类名就删除，没有就添加
        box1.classList.toggle("aaaa")
        box1.classList.toggle("mybox")

自定义属性：

eg：

  <button>显示图片</button>
    <img src="" data-src123="https://img1.baidu.com/it/u=917108111,1107211158&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=274" alt="">
    <script>
        let img = document.getElementsByTagName('img');
        console.dir(img);
        console.dir(img[0].dataset.src123);
        // 点击 显示图片按钮 ，显示图片
        document.querySelector('button').onclick = function(){
            img[0].src = img[0].dataset.src123;
        }

标签的创建和添加：

创建标签:document.createElement("标签名")

添加：标签.append(要添加的标签)

// box.append(span,span2," 通过append添加");

// box.appendChild(span,span2);

插入: box.insertBefore(newnode,oldnode)

  let span = document.createElement("span");
        span.innerHTML = "我是span";
        span.classList.add("myspan");

        let span2 = document.createElement("span");
        span2.innerHTML = "我是span2";
        span2.classList.add("myspan");
        let box = document.querySelector('.box');
        box.insertBefore(span,document.querySelector('ul'));

标签的删除，复制及替换：

删除标签: 标签.remove()

document.querySelector('.box2').remove();

复制克隆

let cloneUl = ul.cloneNode();

替换

box3.replaceChild(newnode,oldnode);

 let ul = document.querySelector('ul');
        ul.removeChild(document.querySelector('li'));
  let cloneUl = ul.cloneNode(true);
        console.log(cloneUl);
        let box1 = document.querySelector('.box1');
  let box3 = document.querySelector('.box3');
 box3.replaceChild(cloneUl,document.querySelector(".box3 p"));

标签的批量添加：

eg：

  <div class="bigBox"></div>
    <script>
        let bigBox = document.querySelector('.bigBox');
 let str = '';
        for (let i = 0; i < 10; i++) {
            str += `<div>我是div${i+1}</div>`;
        }
        bigBox.innerHTML = str;
 </script>

表格的全选反选与不选：

eg:

<table class="layui-table">
        <colgroup>
          <col width="150">
          <col width="200">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>选择</th>
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
          </tr>
          <tr>
            <td>
                <input type="checkbox" name="" id="">
            </td>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
          </tr>
        </tbody>
    </table>
    <button type="button" class="layui-btn selectAllBtn">全选</button>
    <button type="button" class="layui-btn fanxuanBtn">反选</button>
    <button type="button" class="layui-btn noSelectBtn">不选</button>

    <script>
        let allInput = document.querySelectorAll('input');
        // 点击全选，表格里面的复选框全部选中
        let selectAllBtn = document.querySelector('.selectAllBtn');
        selectAllBtn.onclick = function(){
            allInput.forEach(input => {
                input.checked = true;
            });
        }
        // 反选
        let fanxuanBtn = document.querySelector('.fanxuanBtn');
        fanxuanBtn.onclick = function(){
            allInput.forEach(input => {
                input.checked = !input.checked;
            });
        }
        // 不选
        let noSelectBtn = document.querySelector('.noSelectBtn');
        noSelectBtn.onclick = function(){
            allInput.forEach(input => {
                input.checked = false;
            });
        }
    </script>

以上代码比较复杂，占用内存，优化代码如下：

<script>
        let allInput = document.querySelectorAll('input');
        // 点击全选，表格里面的复选框全部选中
        let selectAllBtn = document.querySelector('.selectAllBtn');
        selectAllBtn.onclick = fn;
        // 反选
        let fanxuanBtn = document.querySelector('.fanxuanBtn');
        fanxuanBtn.onclick = fn;
        // 不选
        let noSelectBtn = document.querySelector('.noSelectBtn');
        noSelectBtn.onclick = fn;
        // 封装  =》   函数       判断=》if语句        不知道怎么办了就想一下能否通过定义一个变量实现
        function fn() {
            // 判断选中的是全选，还是不选  问题是如何判断呢？
            console.log(this);//在事件处理函数里面，this指向的是点击的对应的标签
            /* if(this == selectAllBtn){
                console.log('点击了全选');
            } */

            /* allInput.forEach(input => {
                if (this.classList.contains('selectAllBtn')) {
                    input.checked = true;
                }else{
                    input.checked = false;
                }
            }); */
            /* if (this.classList.contains('selectAllBtn')) {
                allInput.forEach(input => {
                    input.checked = true;
                });
            } else {
                allInput.forEach(input => {
                    input.checked = false;
                });
            } */
            let checked = false;//默认是不选
            let flag = 0;//根据flag判断是否是反选
            if(this.classList.contains('selectAllBtn')){//如果是点击的全选就把变量值设为true
                checked = true;
            }else if(this.classList.contains('fanxuanBtn')){//反选
                flag = 1;
            }
            allInput.forEach(input => {
                // input.checked = checked;
                /* if(flag == 1){
                    input.checked = !input.checked;
                }else{
                    input.checked = checked;
                } */
                // flag == 1? (input.checked = !input.checked):(input.checked = checked)
                input.checked = flag == 1?!input.checked:checked;
            });
        }
        // fn();//window.fn();
        // 改变this指向：bind  call  aplly
    </script>

m0_56714054

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签的获取

/ box.append(span,span2," 通过append添加");console.log("直接对标签属性进行操作============");box1.setAttribute("newattr","添加的属性");// 添加一个属性: 标签.setAttribute(属性名，属性值)// box1.innerText = "<h2>标题2</h2>";box1.innerHTML = "<h2>标题2</h2>";// 标签.属性 = "属性值";// 修改：标签.属性 = "属性值";
复制链接

扫一扫