目录
选择器
document.getElementById("id属性的值");
根据id属性的值获取元素,返回来的是一个元素对象
document.getElementsByTagName("标签名字");
根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByName("name属性的值")
根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.getElementsByClassName("类样式的名字")
根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
document.querySelector("选择器的名字");
根据选择器获取元素,返回来的是一个元素对象
document.querySelectorAll("选择器的名字")
根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
节点之间关系
1.parentNode属性
返回当前节点的父节点元素
2.childNodes属性
返回当前节点的所有子元素数组
3.chiledren属性
返回当前节点的所有子元素数组(元素节点)
4.nextSibling
获取当前节点的下一个兄弟节点
5.nextElementSibling
获取当前节点的下一个元素兄弟节点
6.previousSibling
获取当前节点的上一个兄弟节点
7.previousElementSibling
获取当前节点的上一个兄弟元素节点
节点的属性
(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
* nodeType:节点的类型:
1 代表 标签, 2---属性, 3---文本
* nodeName:节点的名字:
标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
* nodeValue:节点的值:
标签节点---null,属性节点---属性值,文本节点---文本内容
window.onload = function () {
// 1. 获取标签
var box = document.getElementById("box");
// 2. 获取所有子节点
var allNodeList = box.childNodes;
console.log(allNodeList);
var newList = [];
for(var i=0; i<allNodeList.length; i++){
var node = allNodeList[i];
if(node.nodeType === 1){
newList.push(node)
}
}
console.log(newList);
}
节点操作
createElement() 创建元素
appendChild() 添加节点
如果文档树中已经存在了 newchild,它将从文档树中删除,然后重新插入它的新位置。
如果 newchild 是 DocumentFragment 节点,则不会直接插入它,
而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
removeChild() 删除节点
cloneNode(参数) 克隆节点
新节点=要复制的节点.cloneNode(参数) ;
insertBefore() 把元素插入到页面的指定位置
replaceChild() 把当前元素的标签进行替换
自定义属性
getAttribute(名称) 获取节点名称
setAttribute(名称, 值) 设置节点名称和值
removeAttribute(名称) 删除节点
var btn = document.getElementById('btn');
btn.onclick = function () {
// 创建li标签
var li = document.createElement('li');
// 设置li标签的文本内容为 abc
li.innerText = 'abc';
// 把li 插入到ul中的第一个位置
// var ul = document.getElementById('ul');
// ul.insertBefore(li, ul.children[0]);
//
// replaceChild()
// var div = document.createElement('div');
// div.innerText = 'div';
// var ul = document.getElementById('ul');
// ul.replaceChild(div, ul.children[0]);
//
// appendChild()
var ul = document.getElementById('ul');
var sel = document.getElementById('sel');
sel.appendChild(ul.children[0]);
}
var box = document.getElementsByClassName("box")[0];
var newTag = box.cloneNode(true);
// console.log(newTag);
document.body.appendChild(newTag);
<div id="box" age="18" personId="1">张三</div>
var box = document.getElementById('box');
设置自定义属性
box.setAttribute('class', 'test')
box.setAttribute('sex', 'male')
获取自定义属性的值
box.getAttribute('age')
box.getAttribute('sex')
移除属性
box.removeAttribute('age')
box.removeAttribute('id')