8-js基础教程

一、js中获取 DOM 的方法

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

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

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

2. context.getElementsByTagName()

• 参数：标签名
• 返回值：从 context 下获取的指定标签名的 dom 集合，获取不到时是空集合
• 注意：
  1. dom 集合是类数组，有 length 有索引
  2. 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节点：

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

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 firstChild 获取当前元素的第一个子节点

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);

3. 根据节点间关系获取到的节点集合或者节点都是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 文档中。

2. appendChild: 向元素容器的末尾添加一个元素

• 语法：父级容器.appendChild(元素对象);
• 参数：元素对象（新建的也行、之前已经存在也行）
• 返回值：插入到容器中的元素对象

var wrapper = document.getElementById('wrapper');
var obj = wrapper.appendChild(newDiv);

3. 父级容器.removeChild()

var originExist = document.getElementById('originExist');
wrapper.removeChild(originExist);

3. insertBefore 把一个元素插入到指定容器中某一个元素标签之前

• 语法：父级容器.insertBefore(newEle, oldEle);
• 参数：要插入的新元素, 已经存在于容器的老元素
• 返回值：newEle

var insertResutl = wrapper.insertBefore(newDiv, originExist);
console.log(insertResutl);

4. 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');

2. getAttribute() 获取当前 html 某个行内属性的属性值

• 语法：元素对象.getAttribute(attr)
• 参数：属性名
• 返回值：属性值

var name = attributeBox.getAttribute('name');
console.log(name);

3. removeAttribute() 删除指定的属性

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

attributeBox.removeAttribute('age');