DOM核心｜ 青训营笔记

仓映拍子
170 阅读2分钟

DOM核心

概念

文档对象模型（Document Object Model 简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口

对于HTML，DOM使得html形成医科DOM树，包含 文档、元素、节点

image.png

核心内容

1. 创建

1. document.write
2. innerHTML
3. createElement

三种创建元素方法

<button>点击</button>
    <p>abc</p>
    <script>
        /* window.onload = function() {
            document.write('<div>123</div>');
        } */

        // 三种创建元素方式区别
        // 1 document.write() 创建元素 如果页面文档流加载完毕，在调用这句话会导致页面重绘
        /* var btn = document.querySelector('button');
        btn.onclick = function() {
            document.write('<div>123</div>')
        } */
        // 2 innerHTML 创建元素 
        var inner = document.querySelector('.inner');
        inner.innerHTML = '<a href='#'>百度</a>';
        
        // case 1
        /* for (var i = 0; i < 100; i++) {
            inner.innerHTML += '<a href = "#">百度</a>';
        } */
        // 拼接字符串 效率低
        // case 2
        /* var arr = [];
        for (var i = 0; i < 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join(''); */
        // 采用数组形式 依次追加 一次性给inner渲染
        // 效率比createElement更高
        // 3 document.createElement() 创建元素
        /* car create = document.querySelector('.create');
        create.appendChild(a); */
        // 效率居中 逻辑清晰
    </script>

2. 增

1. appendChild
2. insertBefore

<script>
        // 1 创建节点元素节点
        var li = document.createElement('li');
     /*  2 添加节点 node.appendChild(child) node 父级 child是子集   
            后面追加 类似于数组中的push（尾插） */
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4 我们想要页面添加一个新的元素： 1 创建元素 2 添加元素
    </script>

3. 删

1. remove child

node.removeChild(child);
<script>
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        console.log(btn);
        btn.onclick = function() {
            ul.removeChild(ul.children[0]);
            
        }
    </script>

4. 改

  1. 修改元素属性：src、href、title等

img.src = 'imges/zxy.jpg';
  1. 修改普通元素内容：innerHTML、innerText 实例 p.innerText = getDate(); div.innerText = getDate(); innerText和innerHTML的区别：
 // 1. innerText 不识别html标签 非标准 去除空格和换行
      var div = document.querySelector('div');
      div.innerText = '<strong>今天是：</strong> 2019';
      // 2 innerHTML 识别html标签 W3C标准 保留空格和换行
      div.onmouseover = function() {
        div.innerHTML = '<strong>今天是：</strong> 2019';
      }
      // 这两个属性都是可读写的 可以获取元素里的内容
  1. 修改表单元素：value、type、disable
 <script>
   // 1 获取元素
   var btn = document.querySelector('button');
   var input = document.querySelector('input');
   // 2 注册事件 处理程序
   btn.onclick = function() {
     // input.innerHTML = '点击了'; 这是个普通盒子 比如div 标签里的内容
     // 表单里面的值 文字内容是通过 value 来修改的
     input.value = '被点击了';
     // 如果想要某个表单被禁用 不能再点击disabled 我们想要这个按钮button禁用
     // btn.disabled = ture;
     this.disabled = true;
     // this 指向的是事件函数的调用者 btn
   }
   </script>
  1. 修改元素样式：style、className

image.png 多类名选择器实例

 <body>
  <div class="register">
    <input type="password" class="ipt">
    <p class = "message">请输入6~16位密码</p>
  </div>
  <script>
    var p = document.querySelector('.message');
    var input = document.querySelector('.ipt');
    input.onblur = function() {
      if (input.value.length < 6 || input.value.length > 16) {
        p.className = 'message wrong';
        p.innerHTML = '输入错误，请输入6~16位密码';
      }
      else {
        p.className = 'message';
        p.innerHTML = '输入正确';
      }
    }
  </script>

5. 查

1. DOM提供的API方法：getElementByID、getElementsByTagName 古老，不推荐
2. H5新方法：querySelector、querySelectorAll 提倡
3. 利用节点操作获取元素：
    - 父：parentNode（得到离元素**最近**的 **亲爸爸** 节点 ，找不到返回null）
    - 子：children（最常用）
    - 兄：previousElementSibling、nextElementSibling     
  1. 概述
  > 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node表示

一般，节点至少拥有nodeType(节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性 元素节点 nodeType 为1 属性节点 nodeType 为2 文本节点 nodeType 为3（包含文字，空格，换行）

  2. 获取元素通常使用两种方式：

    1. 利用DOM提供的方法获取元素

   // document.getElementById()
   // document.getElementsByTagName()
   // document.querySelector等
   // 逻辑性不强 繁琐

    2. 利用节点层级关系获取元素

       // 利用父子兄节点关系获取元素
       // 逻辑性强，但是兼容性稍差

6. 属性操作（针对自定义属性）

1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值

image.png

3. removeAttribute：移除属性

<div id="demo" index = "1"></div>
  <script>
    var div = document.querySelector('div');
      // 2 设置元素属性值
      // (1) element.属性 = '值'
      div.id = 'test';
      // (2) element.setAttribute('属性', '值'); 主要针对自定义属性
      div.setAttribute('index', 2);
  </script>


<body>
  <div id="demo" index = "1"></div>
  <script>
    var div = document.querySelector('div');
      // 2 设置元素属性值
      // (1) element.属性 = '值'
      div.id = 'test';
      div.className = 'navs'
      // (2) element.setAttribute('属性', '值'); 主要针对自定义属性 id class 其他
      div.setAttribute('index', 2);
      div.setAttribute('class', 'footer');  // class 特殊 这里面写的就是class 不是 className
      // 3 移除属性 removeAttribute('属性')
      div.removeAttribute('index');
  </script>
</body>

4. 自定义属性

自定义属性目的：保存并使用数据而不用保存到数据库中
问题：自定义属性是通过getAttribute（‘属性’）获取
但有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

因此H5新增了自定义属性

1 设置H5自定义属性
H5规定自定义属性data-开头作为属性名并赋值

2 获取H5自定义属性
1 兼容性获取 element.getAttribute（’data-index‘）；

2 H5新增elemen.dataset.index 或者 element.dataset[’index‘]  ie11以上


<div getTime = "20" data-Time = "20" data-index = "2" data-list-name = "andy"></div>
  <script>
    var div = document.querySelector('div');
    console.log(div.getTime);
    console.log(div.getAttribute('getTime'));
    // h5新增的获取自定义属性的方法
    // dataset 是一个几个里面存放了所有以data开头的自定义属性
    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    //如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法
    console.log((div.dataset.listName));
    console.log((div.dataset['listName']));
  </script>

image.png

image.png

7. 事件操作

给元素注册事件，采取 事件源.事件类型 = 事件处理程序 image.png

附：如有错误，恳请指正，侵权必删:D

avatar
文章
阅读
粉丝