文章目录
HTML DOM createElement() 方法
- createElement() 方法通过指定名称创建一个元素
- 语法:
document.createElement(nodename)
HTML DOM querySelector / querySelectorAll() 方法
document.querySelector
方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素。 如果找不到匹配项,则返回null
。
- 语法:
document.querySelector(CSS selectors)
- querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
- 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
document.querySelectorAll
方法返回与指定的CSS选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回NodeList
对象,NodeList 对象表示节点的集合。可以通过索引访问,索引值从0
开始。
- 语法:
elementList = document.querySelectorAll(selectors);
- elementList 是一个静态的 NodeList 类型的对象。
- selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。
// 取得body元素
const body = document.querySelector("body");
// 返回第一个 ul 元素
const list = document.querySelector('ul');
// 取得某div中所有<em>元素 类似getElementsByTagName("em")
const ems = document.getElementById("myDiv").querySelectorAll("em");
// 返回所有类名为 info 或者 warning 的 div 元素
const elements = document.querySelectorAll('div.info, div.warning');
HTML DOM appendChild() 方法
appendChild()
方法将节点添加到给定父节点的子节点列表的末尾。如果给定的子代是文档中现有节点的引用,则它将移动到新位置 。- 提示:如果需要创建包含文本的新段落,需要添加到段落的文本的文本节点,然后向文档添加该段落。同时可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
HTML DOM removeChild() 方法
removeChild()
方法可从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。- 注意: 被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中, 所以还可以把这个节点重新添加回文档中。
let oldChild = node.removeChild(child);
//OR
element.removeChild(child);
child
是要移除的那个子节点.node
是child
的父节点.oldChild
保存对删除的子节点的引用oldChild === child
- 如果上例中的child节点不是node节点的子节点,则该方法会抛出异常.
HTML DOM replaceChild() 方法
replaceChild()
方法用指定的节点替换当前节点的一个子节点,并返回被替换掉的节点。- 语法:
replacedNode = parentNode.replaceChild(newChild, oldChild);
newChild
用来替换oldChild
的新节点。如果该节点已经存在于DOM树中,则它会被从原始位置删除。oldChild
被替换掉的原始节点。replacedNode
和oldChild
相等。
let list = document.querySelector('ul');
let oldItem = list.querySelector('li');
let newItem = document.createElement('li');
newItem.innerHTML = '前端*****';
let replacedItem = list.replaceChild(newItem, oldItem);
HTML DOM cloneNode 方法
- cloneNode() 方法可创建指定的节点的精确拷贝。
- cloneNode() 方法 拷贝所有属性和值。
- 该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。
即cloneNode()
克隆的节点复制真节点的样式,标签,属性。至于标签里的元素,事件没有复制,所以称它浅克隆。cloneNode(true)
完全把真节点的东西给复制了过来,所以称它为深克隆.
HTML DOM insertBefore() 方法
insertBefore()
方法在您指定的已有子节点之前插入新的子节点(并返回插入的节点)
Element.getAttribute / Element.setAttribute
Element.getAttribute
方法返回元素上给定属性的值,Element.setAttribute
设置给定元素上属性的值。
Element.hasAttribute / Element.removeAttribute
Element.hasAttribute
方法检查给定元素是否具有指定的属性,返回值为boolean。Element.removeAttribute
方法,从元素中删除具有给定名称的属性。