JavaScript操作DOM对象

Posted 2021-12-28 ws1149939228

1.javascript操作DOM分为三类:DOM Core(核心)，html-DOM和CSS-DOM。

2.访问节点
（1）使用getElement系列方法访问指定节点
  getElementById():返回id属性查找对象第一个的引用
  getElementByName():带有指定名称name查找对象的集合
  getElementByTagName():带有指定标签名TagName查找的对象的集合
 (2)根据层次关系访问节点
 parentNode  父节点
 childNodes   子节点
 firstChild   第一个子节点
 lastChild   最后一个子节点
 nextSibling   下一个节点
 previousSibling   上一个节点
3.可兼容不同浏览器的element属性:
  firstElementChild   第一个子节点
  lastElementChild   最后一个字节点
  nextElementSibling   下一个节点
  previousElementSibling   上一个节点
4.节点信息的属性:
  nodeName(节点名称)
  nodeValue(节点值)
  nodeType(节点类型)
节点类型          NodeType值
  元素element        1
  属性attr           2
  文本text           3
  注释comments       8
  文档document       9
5.操作节点
(1)改变节点属性的方法:
   getAttribute("属性名"):用来获取属性的值
   getAttribute("属性名","属性值"):用来设置属性的值
6.创建和插入节点
(1)创建节点
   createElement(tagName)   创建一个标签名为tagName的新元素节点
   A.appendChild(B)   B节点追加至A节点的末尾
   insertBefore(A,B)   A节点插入B节点之前
   cloneNode(deep)   复制某个指定的节点
7.删除和替换节点
(1)删除和替换节点的方法
   removeChile(node)   删除指定的节点
   replaceChile(newNode,oldNode)   节点替换指定节点
8.操作节点样式
(1)style属性
   语法:HTML元素.style.样式属性="值";
   style对象的常用属性:background(背景),text(文本),padding(边距),border(边框)
(2)常用事件
   onclick   单击事件
   onmouseover   鼠标移动某元素之上
   onmouseout   鼠标从某个元素移开
   onmousedown   鼠标按钮被按下
(3)className属性
   语法:HTML元素.className="";
9.获取元素样式
  style属性获取样式的属性值语法:HTML元素.style.样式属性;
  currentStyle对象包含style特性语法:HTML元素.currentStyle.样式属性;
  getComputedStyle()方法;方法接收两个参数,获取样式的属性值语法:
  document.defaultView.getComputedStyle(元素,null).属性;
10.获取元素位置
(1)元素属性应用
   offsetLeft  左边界
   offsetTop   上边界
   offsetHeight   高度
   offsetWidth   宽度
   offsetParent   偏移容器,动态定位包含元素的引用
   scrollTop   滚动条的垂直位置
   scrollLeft   滚动条的水平位置
   clientWidth   可见宽度
   clientHeight  可见高度
语法:document.documentElement.scrollTop;
     document.documentElement.scrollLeft;
 或者
     document.body.scrollTop;
     document.body.scrollLeft;