乐趣区

关于html:操作DOM的方法

jiezi

创立节点

一、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>

四、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>

二、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 用来返回元素的大小以及绝对于浏览器可视窗口的地位

退出移动版