浏览器中的JavaScript

浏览器中JavaScript

如何选取元素

element = dcoument.getElementById("idName")

根据IdName来选取元素

element = document.getElementById("id")

element = dcoument.getElementByClassName("className")

根据类的名字来选取元素

element = document.getElementsByClassName("className")

element = document.getElementsByTagName("tagName")

根据Tag名来选取元素

element = document.getElementsByTagName("tagName")

下面的就是通过css选择器来选取元素的方法

element = document.querySelector(selectors);

文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element。 如果找不到匹配项，则返回null。

var el = document.querySelector(".myclass")

var el = document.querySelector("div.user-panel.main input[name='login']")

选择器可以是使用的css选择器（class，id，属性等）

• elementList = parentNode.querySelectorAll(selectors)
  

选取符合条件的元素列表项

返回的NodeList像使用数组那样使用即可

选取后向其写入或者读取呢？

Element.textContent

• ie8不支持,会替换掉原先的内容

• 读取内容let content = Element.textContent

• 写入内容Element.textContent = Element.textContent + "!"

      <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>jquery</li>
          <li>HTML5</li>
          <li>CSS3</li>
          <li>ES6</li>
      </ul>
      <script>
          let Elements = document.querySelectorAll("li")
          Elements.forEach((items,index)=> {
              console.log(items.textContent)
              items.textContent = items.textContent + "  : " + index
          })
      </script>
  

  HTML : 0
  CSS : 1
  JavaScript : 2
  jquery : 3
  HTML5 : 4
  CSS3 : 5
  ES6 : 6
  

Element.innerText

var renderedText = HTMLElement.innerText;
HTMLElement.innerText = string;

与textContent的区别

• textContent 会获取所有元素的内容，包括 script 和style元素，然而 innerText 不会。
• innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。
• 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。

    <script>
        let content1 =document.querySelector("body").textContent
        let content2 =document.querySelector("body").innerText
        console.log("content1" + content1)
        console.log("content2" + content2)
    </script>

content1
    
        HTML  : 0
        CSS  : 1
        JavaScript  : 2
        jquery  : 3
        HTML5  : 4
        CSS3  : 5
        ES6  : 6
    
    
        let Elements = document.querySelectorAll("li")
        Elements.forEach((items,index)=> {
            console.log(items.textContent)
            items.textContent = items.textContent + "  : " + index
        })

        let content1 =document.querySelector("body").textContent
        let content2 =document.querySelector("body").innerText
        console.log("content1" + content1)
        console.log("content2" + content2)
    
content2
        HTML : 0
        CSS : 1
        JavaScript : 2
        jquery : 3
        HTML5 : 4
        CSS3 : 5
        ES6 : 6
        //innerText忽略了script里的内容，而textContent完整的显示了出来

Element.innerHtml

const content = element.innerHTML;
element.innerHTML = htmlString;

知道了如何为元素添加和读取内容，那么如何创建新的元素呢？

document.createDocumentFragment()

是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

< !-- html-->
<ul id="ul">
</ul>

var element  = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];
//js
browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

document.createElement("tag")

创建指定的HTML节点

let element = document.createElement(tagName[, options]);

document.createTextNode()

创建新的文本节点

var text = document.createTextNode(data)

知道了如何创建元素那么如何将元素添加到DOM中呢？

添加

var child = node.appendChild(child)

方法将一个节点添加到指定父节点的子节点列表末尾

• node 是要插入子节点的父节点.

• child 既是参数又是这个方法的返回值

  // 创建一个新的段落p元素,然后添加到body的最尾部
  var p = document.createElement("p");
  document.body.appendChild(p);
  

  注意：

  • 如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.

  • 如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.

  var dupNode = node.cloneNode(deep)
  

  node将要被克隆的节点

  dupNode克隆生成的副本节点

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

删除和替换

Node.removeChild(n)

node是要删除的节点的父节点，而n是你要删除的节点（使用获取方法对其进行获取）

Node.replaceChild(newNode,oldNode)

使用新的节点替换旧的节点

如何通过改变类来控制元素的样式

这个类可以是新创建的或者原先有的，通过控制类的存在与否使得样式改变

元素的classList属性

let elementClasses = elementNodeReference.classList;

属性就有方法

• add( String [, String] )

  添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。

• remove( String [,String] )

  删除指定的类值。

• item ( Number )

  按集合中的索引返回类值。

• toggle ( String [, force] )

  当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。

  当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它

• contains( String )

  检查元素的类属性中是否存在指定的类值。

• replace( oldClass, newClass )

  用一个新类替换已有类。

自定义数据属性

data-name 自定义属性可以快速通过document.querySelectorAll('[data-name="name"]')获取到，还可以在某些类似于图片地址的懒加载时设置自定义属性将地址先存于内，然后使用时替换即可！