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

原文地址:https://www.cnblogs.com/article-record/p/12590373.html

时间: 2024-10-11 20:46:38

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

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

HTML DOM Document对象 元素对象 属性对象 事件对象

DOM Document对象 DOM 元素 对象 DOM 属性 对象 DOM 事件 菜鸟教程上 总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自由的假期没了..... 原文地址:https://www.cnblogs.com/expedition/p/11407161.html

0166 DOM 之 节点操作: 删除节点,删除留言案例,复制(克隆)节点,动态生成表格案例,创建元素的三种方式,innerHTML和createElement效率对比

1.1.1 删除节点 node.removeChild(child) // 此处的node指 父节点 node.removeChild() 方法: 从 node节点中删除一个子节点,返回删除的节点. <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 va

XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。

XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. 在本教程的较早章节中,我们介绍了 XML DOM,并使用了 XML DOM 的 getElementsByTagName() 从 DOM 树中取回数据. 在本节中,我们将讲解一些其他较常用的 XML DOM 方法.在本例中,我们使用 XML 文件 books.xml,并使用一个 JavaScript

jQuery on()方法绑定动态元素的点击事件无响应的解决办法

$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count++; } 以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了.现在主要用on,使用on的时候

数据库表的创建、管理和数据操作(实验一),数据库创建

数据库表的创建.管理和数据操作(实验一),数据库创建 今天我们就以实验的形式对表的创建.管理和数据操作进行学习,上课吧. [实验目的]:了解SQL语言的使用,进一步理解关系运算,巩固数据库的基础知识.[实验要求]:利用SQL语言进行数据库表的各种操作:1.数据库表的创建.修改和删除操作.2.向表中进行数据的插入.删除和修改操作.[实验内容]1. 利用数据定义语句在实验一创建的stu_DB库中建立学生管理系统的三个表:Student.Course.SC.2.利用INSERT.UPDATE和DELE

将链表中的所有元素为奇数的节点移到元素为偶数节点的前面,并保证奇数之间顺序不变,偶数之间顺序不变。

2.将链表中的所有元素为奇数的节点移到元素为偶数节点的前面,并保证奇数之间顺序不变,偶数之间顺序不变. 示例: 交换前链表的顺序             交换后链表的顺序 4→5→3→1→2   ==>  5→3→1→4→2 1 ==> 1                   (链表仅含一个元素) 2→1 ==>1→2 ==>         (链表为空) C/C++: 链表节点定义为: struct node { struct node *next; int value; };

JavaScript之DOM-4 文档结构和遍历(节点树、元素树、文档的遍历)

一.节点树 节点树 概念 - HTML DOM 将 HTML 文档视作树结构 - 文档中的元素.属性.文本.注释等都被看作一个节点 - 这种结构被称为节点树: 上下层节点 - 节点树中的节点彼此拥有层级关系,DOM 使用如下属性遍历整棵节点树: 平行的节点 - 节点树中使用如下方法访问平行的兄弟节点: 二.元素树 元素树 概念 - 元素树是节点树的一个子集,只包含其中的元素节点 上下层元素 - 与节点树一样,元素树上的元素节点也有父子关系,使用如下属性可以获取这些关系: 平行的元素 - 元素树使

on()方法绑定动态元素的点击事件无响应

on前面的元素也必须在页面加载的时候就存在于dom里面 支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.8之后就不推荐使用了.现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面.动态的元素或者样式等,可以放在on的第二个参数里面. <script> $(function(){ $(".col-sm-10 .infor_data").on("click",".infor_