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

和雍
790 阅读4分钟

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

一、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节点：

节点nodeTypenodeNamenodeValue
元素节点1大写标签名null
文本节点3#text文本内容
注释节点8#comment注释内容
document9#documentnull

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

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);
    1. 根据节点间关系获取到的节点集合或者节点都是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');
avatar
文章
阅读
粉丝