节点和元素属性样式

节点和元素属性样式

1. 创建节点

1-1 creatTextNode

document.createTextNode(data)

创建一个新的文本节点，data 是一个字符串为文本节点的内容

<div class="container"></div>

<script>
    // creattextNode 文本节点
    let elem = document.querySelector('.container');
    let text = document.createTextNode('hello js');
    elem.append(text);
    // <div class="container">hello js</div>
</script>

1-2 createElement

document.creaetElement(tagName)

创建一个由标签名称 tagName 指定的 HTML 元素节点对象

• 创建元素之前会将tagName 转化成小写

<div class="container"></div>

<script>
    // createElement 创建元素节点
    let elem = document.querySelector('.container');
    let create = document.createElement('div');
    console.log(create)
    create.innerText = 'Hello JSX'
    elem.append(create)
    // <div class="container"><div>Hello JSX</div></div>
</script>

1-3 cloneNode

node.cloneNode(deep)

• deep 是否采用深度克隆，如果为 true，则该节点的所有后代节点也都会被克隆，如果为false，则只克隆该节点本身

复制调用该方法的节点对象，node 节点对象方法

<div class="container">
    <div class="row">
        <p>hello world</p>
    </div>
</div>

<script>
    let elem = document.querySelector('.row');
    // 克隆节点
    let clone = elem.cloneNode(true);
    console.log(clone)
    // 参数为true 深度克隆
    // <div class="row">
    //     <p>hello world</p>
    // </div>
</script>

1-4 importNode

document.importNode(externalNode, deep)

• externalNode：将要从外部文档导入的节点
• deep：是否要导入节点的后代节点，是一个布尔类型

复制调用该方法的节点对象，documet 对象方法

<div class="container">
    <div class="row">
        <p>hello world</p>
    </div>
</div>
    
<script>
    // document对象方法
    // 克隆节点并插入到当前文档
    let elem = document.querySelector('.row');
    // 克隆节点
    let clone = document.importNode(elem, true);
    console.log(clone);
    // 插入新元素
    elem.append(clone)
</script>

1-5 creatDocumentFragment

document.createDocumentFragment()

创建一个新的空白的文档片段，指向 DocumentFragment 对象的引用

• 文档片段处于内存中，将元素插入到文档片段时不会引起回流，使用代码片段能提升性能

<ul class="panel"></ul>

<script>
    let panel = document.querySelector('.panel');
    // 空文档片段
    let fragment = document.createDocumentFragment();
    console.log(fragment)
    let arr = ['Firefox', 'Chrome', 'Opera',
        'Safari', 'Internet Explorer']
    arr.forEach((item) => {
     
        let list = document.createElement('li');
        list.textContent = item;
        fragment.appendChild(list);
    })
    panel.appendChild(fragment);
</script>

2. 节点内容

2-1 innerHTML

inneHTML 用于向标签中添加 html 标签内容，将元素中的 HTML 标签以字符串形式获取，并解析 HTML 标签语法

innerHTML 会触发浏览器的解析器重绘 DOM

• innerHTML += 会发生重绘，它会先移除旧的内容，然后写入新的

<div class="main">hello world</div>

<script>
    //  innerHTML在添加内容时会发生重绘
    let main = document.querySelector('.main');
    console.log(main.innerHTML); // hello world

    // 解析HTML标签，也可以获取HTML标签
    main.innerHTML = '<div>hello jsx</div>';
    console.log(main.innerHTML);
    // <div>hello jsx</div>

    // innerHTML+= 会进行重绘
    // 导致main元素节点事件无法响应
    main.addEventListener('click', function(e) {
     
        console.log(this.innerHTML);
        this.parentElement.innerHTML += '<h3>jsx</h3>'
    })
</script>

2-2 outerHTML

outerHTML 获取元素内容的 HTML 表示形式或替换元素的内容

• outerHTML 不会删除原来的旧的内容
• 只是用新的内容替换旧的内容，旧的内容依然存在

<div class="main">hello outer</div>
<div class="all">hello jsx</div>
    
<script>
    // outerHTML
    let main = document.querySelector('.main');
    let all = document.querySelector('.all')
    console.log(main.outerHTML);
    console.log(all.innerHTML);
    // 不会删除旧内容,新的内容替换旧的内容
    main.outerHTML = `<h3>hello outer</h3>`
    console.log(main.outerHTML)
    
    // innerHTML 添加HTML内容 会先删除旧内容然后删除新内容
    all.innerHTML = `<h3>innerHTML</h3>`
    console.log(all.innerHTML);
    // <div class="main"><h3>innerHTML</h3></div>
</script>

2-3 textContent & innerText

textContent：表示存文本内容

innerText：表示一个元素中已被渲染的内容

• 获取时忽略所有标签，只获取文本内容
• 设置时将内容中的标签当文本对待不进行标签解析

<div class="container">Hello jsx</div>

<script>
    // textContent 和 innerText 都是忽略标签返回存文本
    let elem = document.querySelector('.container');
    console.log(elem.textContent); // Hello jsx
    console.log(elem.innerText); // Hello jsx

    // 设置文本是不会对标签解析
    elem.textContent = '<h3>JSX LJJ</h3>'
    console.log(elem.textContent); // '<h3>JSX LJJ</h3>'

    elem.innerText = '<h3>JSX - LJJ</h3>';
    console.log(elem.textContent); // '<h3>JSX - LJJ</h3>'
</script>

2-4 outerText

outerText 返回的值与 innerText 一致，它将删除当前节点并将其替换为给定的文本

<div class