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

Posted article-record

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM元素选择 属性操作 事件操作 节点操作 创建元素的区别相关的知识,希望对你有一定的参考价值。

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

以上是关于DOM元素选择 属性操作 事件操作 节点操作 创建元素的区别的主要内容,如果未能解决你的问题,请参考以下文章

JS中的DOM操作和事件

锋利的jQuery ——jQuery中的DOM操作

jQuery中dom操作(待续)

jQuery之常用DOM操作

jquery中的DOM操作

JS中的事件以及DOM 操作