【前端自学之路】JS之DOM详解

js dom, 什么是dom

什么是DOM呢?

DOM(Document Object Model) 文档对象模型

HTML标签结构在内存的实现就是一个倒立的树型结构,而且是个N叉树

提供操作文档对象的DOM接口

简白的话说,通过DOM可以操作HTML标签元素,包括HTML所有的CSS属性和动作行为等

原生DOM提供了哪些接口呢

查找元素

我们要操作修改HTML元素,首先得查找到这个元素

  • document.getElementById(‘idname’) 通过HTML ID属性查找元素
  • document.getElementsByClassName(‘classname) 通过class属性 查找元素
  • document.getElementsByTagName(‘tagname’) 通过标签名 查找元素

  • document.querySelector(‘#idname’) 通过id属性查找元素,多个 #

  • document.querySelectorAll(‘.classname’) 通过class属性查找所有的元素
1
var d = document.getElementById('divid');

创建元素

createElement

1
2
// 注意这个知识创建了这么一个div元素,这个元素还没有在DOM树中
var newDiv = document.createElement('div');

添加元素

  • insertBefore(A, B) 在B节点前面添加A节点
  • A.appendChild(B) A节点内结尾添加B节点
1
2
// 这句,就是把上面创建的div元素,真正添加到 DOM树
document.body.appendChild(newDiv);

获取父节点、子节点

  • childNodes 获取所有子节点
  • parentNode 获取父节点
1
2
// 获取body元素的所有子节点
var nodes = document.body.childNodes;

获取元素的CSS样式

每个dom节点都有style属性,这个style属性包括了大部分css属性

1
2
var main = document.getElementById('main');
console.log(main.style);

执行看下style的结果:

1
2
3
4
5
6
7
8
9
CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "",  alignmentBaseline: "", all: "", …}
alignContent: ""
alignItems: ""
alignSelf: ""
alignmentBaseline: ""
all: ""
animation: ""
...
}
坚持原创技术分享,谢谢鼓励我继续创作!