本文介绍: DOM(Document Object Model) 文档对象模型,是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API。简单来说DOM就是操作网页api接口

前言

        DOM(Document Object Model) 文档对象模型,是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API。简单来说DOM就是操作网页api和接口。


一、Node类型属性

    1.判断节点类型 nodeType  整数返回值 9 1 3  2

<div id="one"&gt;
    我是一个div
    <!-- 注释 --&gt;
    <span&gt;行内元素</span&gt;
  </div&gt;<div id="two"&gt;我是第二个div</div>
  <script>
    // 1.nodeType 返回节点类型 返回一个整数值 文档节点 返回9
    console.log(document.nodeType);
    // 获取div  通过id获取标签
    var div1 = document.getElementById('one');
    console.log(div1);
    console.log(div1.nodeType,'元素节点');
    console.log(div1.attributes.id.nodeType,'属性节点');

    2.返回节点纯大写名称 nodeName DIV BODY

 var div1 = document.getElementById('one');
 console.log(document.body.nodeName);

    3.返回文本字符 nodeValue

console.log(div1.firstChild.nodeValue);

    4.textContent 返回元素和后代元素文本内容 

var div1 = document.getElementById('one');
console.log(div1.textContent)

    5.nextSibling 获取同级节点下一个节点

var div1 = document.getElementById('one');
var div2 = document.getElementById('two');
console.log(div1.nextSibling,'获取后一个节点');

    6.previousSibling 获取同级节点前一个节点

var div1 = document.getElementById('one');
var div2 = document.getElementById('two');
console.log(div2.previousSibling,'获取前一个节点');

    7.获取父节点 parentNode

console.log(div1.parentNode);

    8.获取父元素节点 parentElement

console.log(div1.parentElement);

    9.获取元素的子节点 childNodes数组对象 包括文本注释…节点

console.log(div1.childNodes);
console.log(Array.isArray(div1.childNodes));

    10.获取元素的元素节点 children 类数组对象 

console.log(div1.children);

    11.firstChild  获取元素第一个子节点

console.log(document.body.firstChild);

    12.lastChild  获取元素最后一个子节点

console.log(document.body.lastChild);

二、DOM操作方法

    增删插替换都是由父元素调用
    新增节点:appendChild(新节点)

//创建一个节点 createElement();
var div =  document.createElement('div');
//  给元素 设置文本内容 innerHtml innerText
div.textContent = 'four';
document.body.appendChild(div);

    插入节点:insertBefore(插入的节点,参考节点)

//插入节点 insertBefore(要插入的节点,参考节点)
var div =  document.createElement('div');
div.textContent = 'four';
//  获取参考节点 
console.log(document.body.children,'获取当前元素所有子元素节点');
var two = document.body.children[1];
document.body.insertBefore(div,two);

    替换节点:replaceChild(替换的节点,被替换的节点)

/**
* 替换节点 replaceChild(替换的节点,被替换的节点)
*/
var div =  document.createElement('div');
div.textContent = 'four';
var one = document.body.children[0];
document.body.replaceChild(div,one);

    删除节点: removeChild(删除的节点)

/**
* 删除节点 removeChild(要删除谁)
*/
var two = document.body.children[1];
document.body.removeChild(two);

    克隆节点 :cloneNode(true/false);
        要克隆谁 谁调用cloneNode true深克隆 既克隆节点样式以及内容
        false只克隆节点样式不克隆内容

什么是深克隆,什么是浅克隆?
          1.深克隆指的是既克隆节点的样式,还克隆节点的内容
          2.浅克隆指的是只克隆节点的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>我是块级元素</div>
    <script>
        var div = document.querySelector('div');
        // 克隆节点        cloneNode(true/flase)   默认是false  浅克隆      true  深克隆
        var newNode = div.cloneNode(true);
        document.body.appendChild(newNode);
    </script>
</body>
</html>

原文地址:https://blog.csdn.net/l12345666777/article/details/134585080

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_3915.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注