DOM元素选择 属性操作 事件操作 节点操作 创建元素的区别

Posted 2021-03-03 article-record

DOM

获取页面元素

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();：创建多个元素效率比数组拼接慢一些，比字符串拼接快很多, 但是结构更清晰些