DOM

Document对象是什么

在DOM里document对象可以代表页面
document对象可以得到HTML页面全部内容
document对象的原型是指向Node的

示例代码:

<script>
    /*
        document对象
          * DOM预定义 - 已经被创建完毕了 - 允许直接使用
          * 得到的是HTML页面的源代码 - 该对象表示当前HTML页面
     */
    console.log(document);
    // 利用instanceof来判断document是否是一个对象
    console.log(document instanceof Object);// 调用结果为true 表示document是一个JavaScript对象
    // document对象的属性和方法被定义在原型上
    console.log(Document.prototype);
    /*
        使用构造函数的方法创建一个对象
          * 原因 - DOM底层已经编写好了所以不需要我们再去创建了可以直接使用
     */
    var document = new Document();
    console.log(document);
</script>

Document对象的继承链

<script>
    // 利用instanceof判断Document.prototype(对象原型)是否继承于Node
    console.log(Document.prototype instanceof Node);// 调用结果为 true所以document对象是继承于Node的
     // node对象是继承于EventTarget的  (EventTarget目标时间的意思)
    console.log(Node.prototype instanceof EventTarget);

    console.log(Document.prototype instanceof EventTarget);
    // DOM中的对象之间的继承关系远比语法中的继承关系复杂
    console.log(Document.prototype instanceof HTMLDocument);
</script>

getElementById()方法

以查找ID属性的方式来定位指定元素的位置
使用getElementById()方法只能查找到一个元素,因为ID属性是唯一的不能重复

示例代码:

<body>
<button id="btn">哒哒哒</button>
<div id="d1"></div>
<script>
    // 1. 通过Document对象的getElementById()方法定义元素
    var buttonElement = document.getElementById('btn');
    /*
        * 打印测试的结果 - 是对应元素的HTML代码
        * DOM无论是使用的还是得到的都应该是对象
     */
    console.log(buttonElement instanceof Object);// 调用结果为 true
    /*
        DOM提供了一系列的对象 - 对应HTML页面的每一个元素
          * <button> 元素对应具有HTMLButtonElement对象
          * <div> 元素对应具有HTMLDivElement对象
     */
    console.log(buttonElement instanceof HTMLButtonElement);// 调用结果为 true

    var d1 = document.getElementById('d1');
    console.log(d1 instanceof HTMLDivElement);// 调用结果为 true
</script>
</body>

getElementsByName()方法

name属性不是唯一 - 得到的结果可能是多个,也可能是一个
会得到全部带有 name属性的元素，以类数组表示得到的元素（NodeList类型)

示例代码:

<body>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<button name="btns">哒哒哒</button>
<script>
    // name属性不是唯一 - 得到的结果可能是多个,也可能是一个
    var buttonElements = document.getElementsByName('btns');
    /*
        NodeList集合 - 类数组对象
          * 得到每一个对应元素的话 - 通过索引值
     */
    // 通过索引值得到指定的name属性
    console.log(buttonElements[4]);
    // 判断buttonElements是否是节点列表
    console.log(buttonElements instanceof NodeList);// 调用结果为 true
</script>
</body>

getElementsByClassName()方法

使用class属性的值来查找指定元素的位置
会得到全部带有 class属性的元素，以类数组表示得到的元素（HTMLCollection类型）

示例代码:

<body>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<button class="btns">哒哒哒</button>
<script>
    var buttens = document.getElementsByClassName('btns');

    /*
    getElementsByClassName()方法
     * 以查找 class属性值 的方式来定位指定元素的位置
     * 会得到全部带有 class属性 的元素，以类数组表示得到的元素（ HTMLCollection类型 ）
    */

    console.log(buttens);
</script>

querySelector()方法与querySelectorAll()方法

querySelector()方法 - 返回的是第一个匹配的元素
querySelectorAll()方法 - 返回的NodeList集合

示例代码:

<body>
<button id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    // 该方法返回的是第一个匹配的元素
    var buttons = document.querySelector('#btn');
    console.log(buttons);

    var buttons1 = document.querySelector('.btns');
    console.log(buttons1);

    // querySelectorAll()方法返回的NodeList集合
    var buttons2 = document.querySelectorAll('btns');
    console.log(buttons2);
</script>
</body>

NodeList集合

动态集合与静态集合
- 动态集合(HTMLCollection) - 根据HTML元素变化而变化
  - 该集合的length属性值是变化的 - 影响后续的操作
- 静态集合(NodeList) - 不会根据HTML元素变化而变化
  - 如果执行删除操作 - 该集合中可能存在已不存在的元素

示例代码:

<body>
<button class="btns" id="btn">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<button class="btns">按钮</button>
<script>
    /*
        动态集合与静态集合
        * 动态集合(HTMLCollection) - 根据HTML元素变化而变化
          * 该集合的length属性值是变化的 - 影响后续的操作
        * 静态集合(NodeList) - 不会根据HTML元素变化而变化
          * 如果执行删除操作 - 该集合中可能存在已不存在的元素
     */
    var btnElements = document.getElementsByClassName('btns');
    console.log(btnElements);// HTMLCollection

    /* 打印当前集合的长度
    console.log(btnElements.length);// 5
    // 删除当前集合中某个元素
    var btn = document.getElementById('btn');
    var body = document.body;
    body.removeChild(btn);
    // 再一次打印当前集合的长度
    console.log(btnElements.length);// 4
    */

    var buttonElements = document.querySelectorAll('.btns');
    console.log(buttonElements);// NodeList

    // 打印当前集合的长度
    console.log(buttonElements.length);// 5
    // 删除当前集合中某个元素
    var btn = document.getElementById('btn');
    var body = document.body;
    body.removeChild(btn);
    // 再一次打印当前集合的长度
    console.log(buttonElements.length);// 5
</script>
</body>

创建元素节点

用于创建新的元素节点

示例代码:

<script>
    // 1.创建<button></button>元素
    var btn = document.createElement('button');
    // 2.获取<body>元素
    var body = document.body;
    // 3.向<body>元素添加子节点
    body.appendChild(btn);

</script>

创建文本节点

用于创建新的文本节点

示例代码:

<script>
    // 创建<button></button>元素
    var btn = document.createElement('button');

    /*
         创建文本节点
         为新创建的元素节点添加文本节点
     */
    var textNode = document.createTextNode('按钮');
    /*
        向<button>元素添加子节点
        
     */
    btn.appendChild(textNode);

    // 获取<body>元素
    var body = document.body;
    /*
        向<body>元素添加子节点
        将创建的文本节点添加到指定的元素节点中 - 通过appendChild()方法进行添加
     */
    body.appendChild(btn);

</script>
</body>

创建属性节点

用于创建属性节点
注意 - 该方法只能接收一个参数，做为属性节点的属性名，属性值使用 nodeValue 创建

示例代码:

<body>
<script>
    // 创建<button></button>元素
    var btn = document.createElement('button');

    /*
        创建文本节点 - 为新创建的元素节点添加文本节点
     */
    var textNode = document.createTextNode('按钮');
    // 向<button>元素添加子节点
    btn.appendChild(textNode);

    // 创建属性节点 - 为新创建的元素节点添加属性节点
    var attrNode = document.createAttribute('id');
    // 为属性节点设置值
    attrNode.nodeValue = 'btn';
    // 为<button>元素设置属性节点
    btn.setAttributeNode(attrNode);

    // 获取<body>元素
    var body = document.body;
    // 向<body>元素添加子节点
    body.appendChild(btn);

</script>
</body>

DOM编程系列之Document对象个人分享

DOM

Document对象是什么

Document对象的继承链

getElementById()方法

getElementsByName()方法

getElementsByClassName()方法

querySelector()方法与querySelectorAll()方法

NodeList集合

创建元素节点

创建文本节点

创建属性节点

相关推荐