基础教程 8. JS DOM 操做和属性操做

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

1、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);
复制代码

---

2、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);
复制代码

• 3. 根据节点间关系获取到的节点集合或者节点都是DOM集合或者DOM元素对象。咱们能够操做这些集合或者对象，和操做DOM集合或者对象如出一辙。

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

复制代码

3、动态操做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 克隆出来的和原来的节点没有关系
复制代码

4、属性操做

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');
复制代码