1、获取元素
1.1 通过id获取
document.getElementById('id');
使用 getElementById() 方法可以获取带有 ID 的元素对象。
1.2 通过标签名获取
// 获取指定标签名的对象集合
document.getElementsByTagName('标签名');
//获取element该元素内指定标签名的子元素集合
element.getElementsByTagName('标签名');
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。还可以获取某个元素(父元素)内部所有指定标签名的子元素,需要将document换成获取的元素。
注意:父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
1.3 通过类名获取
document.getElementsByClassName(‘类名’);
根据类名返回元素对象集合
1.4 querySelector和querySelectorAll
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回
以上俩种方法中的选择器,可以是多种类型。如果是id选择器,就写成‘#id’,如果是类名选择器,就写成‘.class’,如果是标签选择器,就直接输入标签名。
1.5 获取特殊的元素(body,html)
doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象
1.6 案例操作
<div id='name' class='name1' >你好啊</div>
<script>
//通过id获取div元素
var div1= document.getElementById('name');
// 通过元素标签获取元素内容
var div2 = document.getElementsByTagName('div');
//通过类名获取元素内容
var div3 = document.getElementsByClassName('div');
// querySelector 通过id方式获取
var divById = document.querySelector('#name');
// querySelector 通过class方式获取
var divById = document.querySelector('.name1');
// querySelector 通过标签名方式获取
var divById = document.querySelector('div');
</script>
2 事件
2.1 常见的鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击后触发 |
onmouseover | 鼠标经过时触发 |
onmouseout | 鼠标离开时触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动时触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
3 操作元素
3.1 改变元素内容
//从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去掉
element.innerText
//起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行
element.innerHTML
3.2 获取属性内容
element.属性 //获取属性值。主要获取内置属性,src,style,class,id等
element.getAttribute('属性'); //可获取自定义属性
3.3 设置属性值
element.属性 = ‘值’ // 设置内置属性值。
element.setAttribute('属性', '值');
3.4 移除属性
element.removeAttribute('属性');
3.5 自定义属性
(1)自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
(2)自定义属性获取是通过getAttribute(‘属性’) 获取
(3)自定义属性常用data-开头做为属性名并且赋值。
(4) 自定义属性获取,可以用
1. 兼容性获取 element.getAttribute(‘data-index’); 2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
element.setAttribute(‘data-index’, 2)
3.6 案例操作
<div id="age" index='1'>18</div>
<script>
var d = document.querySelector('div');
// 俩种获取属性的方法
console.log('----俩种获取属性的方法----');
console.log(d.id);
console.log(d.getAttribute('id'));
//俩种修改属性的方法
console.log('----俩种修改属性的方法----');
d.setAttribute('id', 'id1');
console.log(d.getAttribute('id'));
d.id = 'id2'
console.log(d.getAttribute('id'));
// 添加,修改,删除class属性的方法
console.log(' ----添加,修改,删除class属性的方法----');
d.setAttribute('class', 'aaa');
console.log(d.className);
d.className = 'bbb';
console.log(d.className);
d.removeAttribute('class');
console.log(d.className);
//添加自定义属性,可以看打印输出的div中是否存在着俩项属性
console.log('----添加自定义属性,可以看打印输出的div中是否存在着俩项属性----');
d.setAttribute('data-index', '1');
d.setAttribute('data-time', '20');
console.log(d);
console.log(d.dataset);
console.log(d.dataset['index']);
console.log(d.dataset.time);
</script>
4 节点操作
4.1 节点描述
节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个
基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
4.2 节点层级
4.2.1 父节点
//父级节点
node.parentNode
4.2.2 子节点
// 返回包含指定节点的子节点的集合,该集合为即时更新的集合。
parentNode.childNodes(标准)
// 只返回元素类的子节点
parentNode.children(非标准)
//返回第一个和最后一个节点(含所有的子节点),找不到则返回null。同样,也是包含所有的节点。
parentNode.firstChild
parentNode.lastChild
//返回第一个元素节点/最后一个元素节点,找不到则返回null。存在兼容问题,ie9以上不支持
parentNode.firstElementChild
parentNode.lastElementChild
实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和
lastElementChild 又有兼容性问题。
那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
解决方案:
// 如果想要第一个子元素节点,可以使用
parentNode.chilren[0]
// 如果想要最后一个子元素节点,可以使用
parentNode.chilren[parentNode.chilren.length - 1]
4.2.3 兄弟节点
//返回当前元素的下一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
node.nextSibling
// 返回当前元素上一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
node.previousSibling
// 返回下一个元素兄弟节点/上一个元素兄弟节点,找不到则返回null。 存在兼容问题,ie9以上不支持
node.nextElementSibling
node.previousElementSibling
4.3 创建节点
document.createElement('tagName')
4.4 添加节点
// 将一个节点添加到指定父节点的子节点列表末尾。
node.appendChild(child)
//将一个节点添加到父节点的指定子节点前面。
node.insertBefore(child, 指定元素)
4.5 删除节点
node.removeChild()
4.6 复制节点
node.cloneNode();
1、括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
2、括号为true 深拷贝 复制标签复制里面的内容
4.7 案例实践
<div class="demo">
<div class="box2">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
<div class="box">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
<div class="box1">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
</div>
<script>
var b = document.createElement('div');
var box = document.querySelector('.box');
//父节点
console.log(box.parentNode);
//子节点 (节点中包含所有的节点,元素,空格,回车等等)
console.log(box.childNodes);
console.log(box.children[0]);
console.log(box.firstChild);
console.log(box.lastChild);
//元素子节点
console.log(box.firstElementChild);
console.log(box.lastElementChild);
//常用的返回首个元素节点和最后一个元素节点的方法
console.log(box.children[0]);
console.log(box.children[box.children.length - 1]);
// 兄弟节点
console.log(box.nextSibling);
console.log(box.previousSibling);
//查下上一个元素的兄弟节点
console.log(box.nextElementSibling);
console.log(box.previousElementSibling);
// 在box的最后添加子节点
box.appendChild(b);
// 在box的添加指点第几个子节点
box.insertBefore(b, box.children[0]);
//删除节点
box.removeChild(box.children[1]);
// 复制节点(true是深度拷贝,会复制子节点的所有内容),默认不写或false,是浅拷贝,只复制节点本身,不复制内部的子节点
var demo = document.querySelector('.demo');
var d = demo.children[0].cloneNode(true);
demo.appendChild(d);
</script>
小计
今天算是学习js学习了一周了,刚好学到dom相关操作,有时候看来还是需要稍微记录下笔记,以便日后查询,不然又需要重新查找相关的文档。
节点部分目前没有学习完成,暂时未更新案例部分,过几天学习完毕后再更新。 (已于20201218更新)
不过感觉js的部分好多了,学完了基础,正在学习webApis部分,后面还有jQuery、js高级、ajax、vue等等需要学习,前路漫漫,加油,学习还是稍微有点成果的,从刚开始的对js一点也不感冒,到现在简单的语句好歹能看懂,知道一个关键函数方法的作用,希望早日变强!!!!
---- 20201216