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
来源: http://www.bubuko.com/infodetail-2835120.html