JS基础教程（8）

好好先生在掘金73467
379 阅读4分钟

一、js中获取DOM的方法

1. document.getElementById() 根据id获取dom元素对象

参数：元素id
返回值：根据元素id获取到的DOM对象，如果获取不到返回null
注意：
如果ID名字相同：那么获取第一个；
getElementById的上下文必须是 document


var parent = document.getElementById('parent');
console.log(parent);

2. context.getElementsByTagName()

参数：标签名
返回值：从context下获取的指定标签名的dom集合，获取不到时空集合
注意：
dom集合是类数组，有length有索引
context不是指定的，当你想获取哪个元素的下的所有的指定标签，哪个元素就是context


var lis = parent.getElementsByTagName('li'); // 此时要获取id为parent的ul下的所有li，此时context就是parent
console.log(lis);

3. context.getElementsByClassName() 在上下文中，根据元素class名获取元素集合

参数：元素class名字
返回值：带有指定的class的元素集合，如果获取不到则返回空集合
context: 想要在哪个元素下查找某些class类名的元素，哪个元素就是context


var someBox = document.getElementsByClassName('some-box');
console.log(someBox);
var child = parent.getElementsByClassName('child');
console.log(child);

4. document.getElementsByName 通过name属性获取元素对象，一般用于表单元素集合

参数：元素name属性
返回值：带有指定那么属性值的元素集合，获取不到就是空集合


var input = document.getElementsByName('inputField');
console.log(input);

5. document.documentElement 获取html元素对象

console.log(document.documentElement);

6. document.body 获取body元素对象

console.log(document.body);

获取浏览器可视窗口的宽度和高度

宽度


var winW = document.documentElement.clientWidth || document.body.clientWidth;
console.log(winW);


高度


var winH = document.documentElement.clientHeight || document.body.clientHeight;
console.log(winH);

7. 根据选择器获取（可以在移动端使用，在PC端有兼容性问题）

context.querySelector(css选择器) 获取一个
context.querySelectorAll(css选择器) 获取所有


var single = document.querySelector('.some-box');
console.log(single);

var multi = document.querySelectorAll('.some-box');
console.log(multi);

二、DOM节点属性

1. 节点：

在html中所有的内容都成为节点（node）。节点是通过节点属性描述节点间关系的，并且根据节点关系获取元素对象；


DOM节点：

节点	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
文本节点	3	#text	文本内容
注释节点	8	#comment	注释内容
document	9	#document	null

注意：换行和空格都是文本节点

var parent = document.getElementById('parent');
var second = document.getElementById('second');

2. 节点属性

2.1 childNodes 获取当前元素节点的所有子节点，属性值是集合

console.log(parent.childNodes);

2.2 children: 获取当前元素的所有元素子节点，属性值是集合

console.log(parent.children);

2.3 fistChild 获取当前元素的第一个子节点

console.log(parent.firstChild);

2.4 firstElementChild 获取当前元素的第一个元素子节点

console.log(parent.firstElementChild);

2.5 lastChild 获取当前元素的最后一个子节点

console.log(parent.lastChild);

2.6 lastElementChild 获取当前元素的最后一个元素子节点

console.log(parent.lastElementChild);

2.7 parentNode: 获取当前元素的父亲节点，属性值是对象

console.log(second.parentNode);

2.8 previousSibling获取上一个哥哥节点

console.log(second.previousSibling);

2.9 previousElementSibling 获取上一个元素哥哥节点

console.log(second.previousElementSibling);

2.10 nextSibling 获取下一个弟弟节点

console.log(second.nextSibling);

2.11 nextElementSibling 获取下一个元素弟弟节点

console.log(second.nextElementSibling);

根据节点间关系获取到的节点集合或者节点都是DOM集合或者DOM元素对象。我们可以操作这些集合或者对象，和操作DOM集合或者对象一模一样。

parent.lastElementChild.firstElementChild.innerHTML = '我是通过dom节点属性添加的';
parent.lastElementChild.firstElementChild.style.backgroundColor = 'red';
parent.lastElementChild.firstElementChild.onclick = function () {
  alert('这是通过DOM节点属性关系绑定的事件')
};

三、动态操作DOM

  1. 动态创建DOM元素对象 document.createElement()
语法：document.createElement()
参数：html标签名
返回值：新创建的DOM对象
注意：新建的DOM对象和我们从页面中获取的DOM对象操作起来没有任何区别；


var newDiv = document.createElement('div');
newDiv.innerHTML = '我是新建的div';
newDiv.style.backgroundColor = 'red';
newDiv.style.width = '100px';
newDiv.style.height = '100px';
newDiv.onclick = function () {
  alert('我是新建div的点击事件');
};

? 页面上并没有这个div ? 为啥没有呢？ 因为这是我们动态创建的，并没有把这个新建的div插入到html文档中。

  1. appendChild: 向元素容器的末尾添加一个元素
语法：父级容器.appendChild(元素对象);
参数：元素对象（新建的也行、之前已经存在也行）
返回值：插入到容器中的元素对象


var wrapper = document.getElementById('wrapper');
var obj = wrapper.appendChild(newDiv);
  1. 父级容器.removeChild()
var originExist = document.getElementById('originExist');
wrapper.removeChild(originExist);
  1. insertBefore 把一个元素插入到指定容器中某一个元素标签之前
语法：父级容器.insertBefore(newEle, oldEle);
参数：要插入的新元素, 已经存在于容器的老元素
返回值：newEle


var insertResutl = wrapper.insertBefore(newDiv, originExist);
console.log(insertResutl);
  1. cloneNode() 把一个节点进行克隆
语法：curEle.cloneNode(false)
参数：true表示深度克隆，把当前节点的子孙节点都克隆；false表示只克隆当前节点
返回值：克隆出来的节点（）


var cloneWrapper = wrapper.cloneNode();
console.log(cloneWrapper === wrapper); #### false 克隆出来的和原来的节点没有关系

五、属性操作

  1. setAttribute() 给当前元素设置html行内属性
语法：元素对象.setAttribute(attr, value)
参数：属性名, 属性值


var attributeBox = document.querySelector('#attributeBox');
attributeBox.setAttribute('name', '你好');
attributeBox.setAttribute('age', '10');
  1. getAttribute() 获取当前html某个行内属性的属性值
语法：元素对象.getAttribute(attr)
参数：属性名
返回值：属性值


var name = attributeBox.getAttribute('name');
console.log(name);
  1. removeAttribute() 删除指定的属性

语法：元素对象.removeAttribute(attr)
参数：要删除的属性


attributeBox.removeAttribute('age');
avatar
文章
阅读
粉丝