标签:asc 复制 function classname 代码 元素对象 href 设置 有一个
document.getElementById(‘id‘); // id 选择器
document.getElementsByTagName(‘div‘); // 标签选择器 返回伪数组
// html新增
document.getElementsByClassName(‘box‘); // 类名学则器
document.querySelector(‘#id‘); // 返回指定选择器的第一个元素对象,里面写css选择器
document.querySelectorAll(‘.class‘); // 返回所有
document.body; // 获取body元素
document.documentElement; // 获取 html 元素
事件由三部分组成 事件源 事件类型 事件处理程序
事件源:事件被触发的对象var btn = document.getElementById(‘btn‘);
事件类型:如何触发什么事件 (onclick)
事件处理程序:通过一个函数赋值的方式完成
btn.onclick = function () { alert(‘hello‘); }
鼠标事件 | 触发条件 |
---|---|
onclick |
鼠标点击左键触发 |
onmouseover |
鼠标经过触发 |
onmouseout |
鼠标离开触发 |
onfocus |
获得鼠标焦点触发 |
onblur |
失去焦点触发 |
onmousemove |
鼠标移动触发 |
onmouseup |
鼠标弹起触发 |
onmousedown |
鼠标按下触发 |
element.innerText // 从起始位置到终止位置的内容,会去除html标签,同时空格和换行也会去掉
element.innerHTML // 从其实位置到终止位置的全部内容,包括html标签,同时保留空格和换行
// 常用的元素属性 src title src href ...
var img = document.querySelector(‘img‘);
// 标签.属性的赋值
img.src = ‘./img.png‘;
// 表单元素修改也是同理,但是需要注意没有属性值的用true 和false表示
input.placeholder = ‘world‘;
input.disabled = true;
// 修改后为样式为行内样式
element.style.backgroundColor = ‘red‘;
// 提前事先定义样式,通过类名修改样式, 会覆盖之前的类名
element.className = ‘change‘;
标签是否全选案例
var j_cbAll = document.querySelector(‘.j_cbAll‘);
var j_tbs = document.getElementsByClassName(‘j_tbs‘);
// 子级状态跟随父级改变
j_cbAll.onclick = function () {
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = j_caAll.checked;
}
}
// 只要有一个子级没有选中,父级也不会选中
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function () {
var flag = true;
for (var i = 0; i < j_tbs.length; i++) {
// 取反,整个循环结束后就不会还有 false的取反 所以不走if直接走下面了
if (!j_tbs[i].checked) {
flag = false;
break;
}
j_cbAll.checked = flag;
}
}
}
获取元素属性值
// 1. element.属性 (获取元素自身属性)
// 2. // getAttribute 获取自定义属性
element.getAttribute(‘index‘);
设置属性值
// 1. div.id = ‘text‘;
// 2. setAttribute(); 针对自定义属性
element.setAttribute(‘index‘, 2); // 设置index属性值为2
删除属性值
element.removeAttribute(‘index‘) // 移除 index 属性值
自定义属性规范 HTML5规定自定义属性要以 data- 开头作为属性名并且赋值 例如:<div data-inde="1"></div>
利用 DOM树可以把节点划分为不同的层级,常见的是 父子兄弟层级
node.parentNode; // 返回元素最近的一个父节点,如果没有返回null
node.childNodes; // 元素下所有子节点包含文本节点
node.children; // 元素下所有子元素 第一层级 **
// 以下包含文文本节点
node.firstChild; // 获取第一个子节点
node.lastChild; // 获取最后一个子节点
// 以下有兼容性 IE9+
node.firstElementChild; // 获取第一个子元素节点
node.lastElementChild; // 获取最后一个子元素节点
// 含文本节点
console.log(span.previousSibling); // 获取上一个兄弟节点
console.log(div.nextSibling); // 获取下一个兄弟节点
// 存在兼容性 IE9+
console.log(div.nextElementSibling);
console.log(span.previousElementSibling);
// 添加节点需要先创建再添加
var li = document.createElement(‘li‘);
ul.appendChild(li); // ul 尾部添加 li 元素
ul.insertBefore(li); // ul 头部添加 li 元素
ul.removeChild(ul.children[0]); // 删除 ul 中的第一个子元素
ul.children[0].cloneNode(); // 赋值ul中第一个子元素节点 括号内为不写或false 就是只赋值标签不复制内容
ul.children[0].cloneNode(true); // 深拷贝。赋值元素内所有内容
document.write();
:创建元素,如果文档流执行完毕再次调用这个代码,就会发生页面重绘
innerHTML
:创建元素,因为是字符串拼接所以性能会比较慢,如果使用数组形式拼接,效率会更高,结构稍微复杂
document.createElement();
:创建多个元素效率比数组拼接慢一些,比字符串拼接快很多, 但是结构更清晰些
DOM元素选择 属性操作 事件操作 节点操作 创建元素的区别
标签:asc 复制 function classname 代码 元素对象 href 设置 有一个
原文地址:https://www.cnblogs.com/article-record/p/12590373.html