操作DOM的方法

头像
小猿张
    阅读 9 分钟

    创建节点

    一、createElement

    let elem = document.createElement("div");
  elem.id = 'test';
  elem.style = 'color: red';
  elem.innerHTML = '我是新创建的节点';
  document.body.appendChild(elem);

    二、createTextNode

     var node = document.createTextNode("我是文本节点");
  document.body.appendChild(node);

    三、cloneNode

     var dupNode = node.cloneNode(deep);
 deep :  true => 深克隆， false => 浅克隆
实践：
<body>
  <div id="parent">
    我是父元素的文本
    <br/>
    <span>
        我是子元素
    </span>
  </div>
  <button id="btnCopy">复制</button>
</body>
<script>
  var parent = document.getElementById("parent");
  document.getElementById("btnCopy").onclick = function(){
      var parent2 = parent.cloneNode(true);
      parent2.id = "parent2";
      document.body.appendChild(parent2);
  }
</script>

    image.png

    四、createDocumentFragment

    let fragment = document.createDocumentFragment();

实践:
<body>
  <ul id="ul"></ul>
</body>
<script>
  (function()
  {
    var start = Date.now();
    var str = '', li;
    var ul = document.getElementById('ul');
    var fragment = document.createDocumentFragment();
    for(var i=0; i<1000; i++)
    {
        li = document.createElement('li');
        li.textContent = '第'+(i+1)+'个子节点';
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
  })();
</script>

    修改节点

    一、appendChild

    child节点将会作为parent节点的最后一个子节点。
    appendChild这个方法很简单，但是还有有一点需要注意：如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方。
    如果child绑定了事件，被移动时，它依然绑定着该事件

     parent.appendChild(child);

<body>
  <div id="child">
    要被添加的节点
  </div>
  <br/>
  <br/>
  <br/>
  <div id="parent">
    要移动的位置
  </div>        
  <input id="btnMove" type="button" value="移动节点" />
</body>
<script>
  document.getElementById("btnMove").onclick = function(){
      var child = document.getElementById("child");
       document.getElementById("parent").appendChild(child);
  } 
</script>

    image.png

    二、insertBefore

    parentNode.insertBefore(newNode,refNode);

//  parentNode表示新节点被添加后的父节点 newNode表示要添加的节点 refNode表示参照节点，新节点会添加到这个节点之前 
//  refNode 为必传项
//  如果refNode是undefined或null，则insertBefore会将节点添加到子元素的末尾
<body>
  <div id="parent">
    父节点
    <div id="child">                
        子元素
    </div>
  </div>
  <input type="button" id="insertNode" value="插入节点" />
</body>
<script>
  var parent = document.getElementById("parent");
  var child = document.getElementById("child");
  document.getElementById("insertNode").onclick = function(){
      var newNode = document.createElement("div");
      newNode.textContent = "新节点"
      parent.insertBefore(newNode,child);
  }
</script>

    三、 removeChild

    var deletedChild = parent.removeChild(node);

// deletedChild指向被删除节点的引用，它等于node，被删除的节点仍然存在于内存中，可以对其进行下一步操作。
// 如果被删除的节点不是其子节点，则程序将会报错。我们可以通过下面的方式来确保可以删除：
if(node.parentNode){
    node.parentNode.removeChild(node);
}

    四、 replaceChild

     parent.replaceChild(newChild,oldChild)

// newChild是替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，则其将被转移到新的位置 oldChild是被替换的节点

实践：

<body>
  <div id="parent">
    父节点
    <div id="child">                
        子元素
    </div>
  </div>
  <input type="button" id="insertNode" value="替换节点" />
</body>
<script>
  var parent = document.getElementById("parent");
  var child = document.getElementById("child");
  document.getElementById("insertNode").onclick = function(){
      var newNode = document.createElement("div");
      newNode.textContent = "新节点"
      parent.replaceChild(newNode,child)
  }

    节点查询

    一、document.getElementById

    var element = document.getElementById(id);

// 如果元素不存在返回null
// 注意id的大小写
// 文档中可能存在多个id相同的元素，则返回第一个元素
// 只会从文档中搜索，如果创建一个新的并指定id，但是没有添加到文档中，则这个元素不会被查找

<body>
  <p id="para1">Some text here</p>
  <button onclick="changeColor('blue');">blue</button>
  <button onclick="changeColor('red');">red</button>
</body>
<script>
  function changeColor(newColor) {
    var elem = document.getElementById("para1");
    elem.style.color = newColor;
  }
</script>

    二、document.getElementsByTagName

    返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。 整个文件结构都会被搜索，包括根节点。返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用document.getElementsByTagName()

    var elements = document.getElementsByTagName(name);

// 不传参数返回null
// name 是一个元素的名称的字符串，特殊字符*代表所有元素

<body>
  <div>div1</div>
  <div>div2</div>    
  <input type="button" value="显示数量" id="btnShowCount"/>
  <input type="button" value="新增div" id="btnAddDiv"/>    
</body>
<script>
  var divList = document.getElementsByTagName("div");
  document.getElementById("btnAddDiv").onclick = function(){
      var div = document.createElement("div");
      div.textContent ="div" + (divList.length+1);
      document.body.appendChild(div);
  }
  document.getElementById("btnShowCount").onclick = function(){
    alert(divList.length);
  }
</script>

    三、document.getElementsByName

    var elements = document.getElementsByName(name)
// 返回的是nodeList， 且是随着增加删除自动变化的
// 在html中，并不是所有元素都有name属性，比如div是没有name属性的，可以强制加上name属性，也是可以被添加的
// 在IE中，如果id设置成某个值，然后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name
<script type="text/javascript">
  function getElements()
   {
   var x=document.getElementsByName("myInput");
   alert(x.length);
   }
</script>
<body>
  <input name="myInput" type="text" size="20" /><br />
  <input name="myInput" type="text" size="20" /><br />
  <input name="myInput" type="text" size="20" /><br />
  <br />
  <input type="button" onclick="getElements()" value="How many elements named 'myInput'?" />
</body>

    四、document.getElementsByClassName

    var elements = document.getElementsByClassName(names); // or:
  var elements = rootElement.getElementsByClassName(names);
// elements 是一个集合，也是动态更新的，包含所有元素
// names 是一个字符串 表示要匹配的类名列表，类名通过空格分隔
// getElementsByClassName 可以在任何元素上调用，不仅仅是document，调用这个方法的元素将作为本次查找的根元素

  var elements = document.getElementsByClassName("test1 test2");

// 获取所有class为test的元素
  var elements = document.getElementsByClassName("test");
// 获取所有class同时包括 test1 和 test2 的元素
var elements = document.getElementsByClassName('test1 test2')
// 在id为father的元素子节点中获取所有class为child的元素
var elements  = document.getElementById('father').getElementsByClassName('child)

// 还可以调用Array.prototype 的方法
var testElements = document.getElementsByClassName('test');
  var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';;
  });

    五、document.querySelector

    通过css选择器查询元素，注意选择器要符合css选择器的规则，
    返回的是匹配的第一个元素，无匹配则返回null

    var element = document.querySelector(selectors);

// 使用深度优先遍历元素获取
<body>
  <div>
    <div>
      <span class="test">第三级的span</span>    
    </div>
  </div>
  <div class="test">            
    同级的第二个div
  </div>
  <input type="button" id="btnGet" value="获取test元素" />
</body>
<script>
  document.getElementById("btnGet").addEventListener("click",function(){
    var element = document.querySelector(".test");
    alert(element.textContent);
  })
</script>

// 拿到的第一个出现的第三级span

    六、document.querySelectorAll

    返回的是所有匹配的元素， 而且可以匹配多个选择符

    var elementList = document.querySelectorAll(selectors);
// elementList 是一个静态nodeList
// selector 是一个逗号连接的包含一个或多个css选择器的字符串
// 如果selectors 参数中包含css伪元素，则返回一个空的elementList

var matches = document.querySelectorAll("div.note, div.alert");

<body>
  <div class="test">
    class为test
  </div>
  <div id="test">
    id为test
  </div>
  <input id="btnShow" type="button" value="显示内容" />
</body>
<script>
  document.getElementById("btnShow").addEventListener("click",function(){
    var elements = document.querySelectorAll("#test,.test");    
    for(var i = 0,length = elements.length;i<length;i++){
        alert(elements[i].textContent);
    }    
  })
</script>
// alert =>  class为test

    关系节点

    一、parentNode

    每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment

    二、parentElement

    返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null

    三、childNodes

    返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等

    四、children

    一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持
    children属性为只读属性，对象类型为HTMLCollection，你可以使用elementNodeReference.children[1].nodeName来获取某个子元素的标签名称

    五、firstChild

    只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null

    六、lastChild

    返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回null

    七、hasChildNode

    返回一个布尔值,表明当前节点是否包含有子节点.

    八、previousSibling

    返回当前节点的前一个兄弟节点,没有则返回null
    Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如Node.firstChild和Node.previousSibling之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点

    九、previousElementSibling

    previousElementSibling返回当前元素在其父元素的子元素节点中的前一个元素节点,如果该元素已经是第一个元素节点,则返回null,该属性是只读的。注意IE9以下浏览器不支持

    十、nextSibling

    Node.nextSibling是一个只读属性，返回其父节点的childNodes列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回null
    Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如Node.firstChild和Node.previousSibling之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点

    十一、nextElementSibling

    nextElementSibling返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回null,该属性是只读的。注意IE9以下浏览器不支持

    元素属性

    一、setAttribute

    设置指定元素上的一个属性值，如果属性已经存在，则更新该值，否则添加一个新的属性用的名称和值

     element.setAttribute(name, value);

body>
  <div id="div1">ABC</div>
</body>
<script>  
  let div1 = document.getElementById("div1"); 
  div1.setAttribute("align", "center");
</script>

    二、getAttribute

    getAttribute()返回元素上一个指定的属性值。如果指定的属性不存在，则返回null或""（空字符串）

    let attribute = element.getAttribute(attributeName);  


<body>
  <div id="div1">ABC</div>
</body>
<script>  
  let div1 = document.getElementById("div1");
  let align = div1.getAttribute("align");
  alert(align);
</script>

    三、removeAttribute

    removeAttribute()从指定的元素中删除一个属性

    body>
  <div id="div1" style="color:red" width="200px">ABC
   </div>
</body>
<script>  
  let div = document.getElementById("div1")
  div.removeAttribute("style");
</script>

    元素样式

    一、window.getComputedStyle

    二、getBoundingCLientRect

    getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置

    html
    小猿张
    3 声望0 粉丝
    « 上一篇
    vue一些基础知识
    下一篇 »
    前端一些算法&amp;日常实践

    引用和评论

    推荐阅读
    头像
    Hybird混合开发

    小猿张阅读 1.1k

    头像
    Html&Css测试试题（简单版）

    云绮棠兮赞 2阅读 12k

    头像
    刷新iframe的几个方法，管你跨不跨域

    lllllxt_in_sf阅读 9.3k

    头像
    在线考试答题系统（Web+H5+小程序）开发方案与实现附源代码

    行走的打火机阅读 6.3k

    头像
    语义化 HTML (Semantic HTML)

    Mitchell_C阅读 2.7k

    头像
    使用canvas如何实现一个音乐频谱？

    smallStone赞 1阅读 1.6k

    头像
    vue3组件跨层级数据传递provide/inject

    兔子先森赞 1阅读 647

    0 条评论
    得票最新