码迷,mamicode.com
首页 > Web开发 > 详细

js DOM常见操作

时间:2018-11-05 10:12:13      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:doc   判断   type   rtb   selector   不兼容   blog   select   creat   

1. 元素的获取。

  常见的有四种方法。

  (1)document.getElementById():获取对应ID的元素。ID是不能有重复的。所以返回的是一个元素。

    (2)   document.getElementsByTagName():获取对应的标签元素。返回一个数组。

    (3)   document.getElementsByClassName():通过class来获取元素。返回的也是一个数组。注:此方法在IE8浏览器下是不兼容的。

   (4)   document.getElementsByName():通过name属性来获取元素,返回的也是一个数组。

  不常用的两种方法。

  (5)document.documentElement():获取html标签。

  (6)document.body():获取body标签。

  特别的两种

    (7)  document.querySelector("#demo"):获取文档中 id=‘demo‘ 的元素。返回匹配指定选择器的第一个元素。

    (8)  document.querySelectorAll("#demo"):使用方式和 document.querySelector() 方法一样,只是可以获取css选择器匹配的所有元素。

2.元素的操作方法。

  (1)node.appendChild(node1):向某个节点添加一个子节点,这个添加的节点会被放在最后,成为这个节点的最后一个子节点;

  (2)node.removeChild(node1):移除某个节点 。

  (3)insertBefore(nodo1, node2),将node1作为当前元素的子节点,插入到当前元素的节点node2的前面。

  (4)replaceChild(newnode, oldnode);新节点,代替旧结点。

3.获取节点。

  (1)hasChildnodes() 这个方法返回一个布尔值,指示元素是否有子元素。 

  (2)childNodes 返回当前指定元素所有子元素(包括被注释掉的元素)的数组: document.body.childNodes。它返回指定元素的子元素集合,包括HTML节点(元素节点),文本节点(空格也是文本节点)。可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3 是文本节点。

  (3)children返回当前指定元素所有子元素,但是与childNodes 不同的是,他只会返回HTML节点(元素节点),不返回文本节点。

  (4)firstChildelem.firstChild 返回当前元素下的第一个子节点。这个获取到的节点是以childNodes为 标准的,就是包括HTML节点(元素节点),文本节点(空格也是文本节点),所以返回的有可能是一个文本节点。

  (5)lastChildelem.lastChild返回当前元素下的最后一个子节点。

  这个获取到的节点是以childNodes为 标准的,就是包括HTML节点(元素节点),文本节点(空格也是文本节点),所以返回的有可能是一个文本节点。

  (6)nextSbilingelem.nextSbiling 返回紧跟在当前节点后的那一个同级节点(同级元素,不是子元素)。 这个获取到的节点是以childNodes为 标准的,就是包括HTML节点(元素节点),文本节点(空格也是文本节点),所以返回的有可能是一个文本节点

  (7)previousSiblingelem.previousSibling 返回前一个同级节点,跟nextSbiling类似,只不过nextSbiling是返回后一个。

  (8)parentNodeelem.parentNode 返回父节点。

4.属性操作。

  (1)elem.getAttribute(name); 获取元素属性。

  (2)elem.setAttribute(name, value); 设置元素属性。

5. 创建元素,文本节点。

  (1) var p = document.createElement("p")。创建元素,里面的“p”,就是代表创建p元素

div.appendChild(p);就是向div中添加一个p元素,在div的最后面。

  (2) var txt = document.createTextNode("这是文本"); 这是创建文本元素

p.appendChild(txt);向p元素中添加值。

6.获取元素,节点的值。

    <p id="test">123</p> 要获取p之下的文本值

  (1), document.getElementById("test").childNodes[0].nodeValue;(这里不能用children替换childNodes,因为children获取不到 文本节点)。

  (2), document.getElementById("test").innerTEXT;

  (3), document.getElementById("test").innerHTML;

    (2)和(3)的区别:将上面的标签改为:“  <p id="test"><a href="#">123</a></p>  ”

      那么(2)的值还是 123, 但是(3)的值就是<a href="#">123</a>,就是说innerHTML会连html标签也拿到,但是innerText不会。

      

 

参考链接:https://blog.csdn.net/yuling__ting/article/details/51490302

    :https://blog.csdn.net/change_any_time/article/details/79721554

  

js DOM常见操作

标签:doc   判断   type   rtb   selector   不兼容   blog   select   creat   

原文地址:https://www.cnblogs.com/xu-xiao-jin/p/9907439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!