JavaWeb学习——JavaScript操作DOM对象

JavaWeb学习——JavaScript操作DOM对象

1.DOM简介

DOM，（Document Object Model）文档对象模型，通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

DOM对象的结构树：

DOM能干啥？
通过DOM对象JavaScript可以操作所有的HTML元素

• ①改变HTML元素的属性，
• ②操作CSS样式，
• ③删除HTML元素和属性，
• ④添加新的HTML元素，
• ⑥处理HTML元素的事件，
• ⑦创建新的事件

2.访问节点

• document.getElementById(id)：通过元素 id 来查找元素
• document.getElementsByTagName(name)：通过标签名来查找元素
• document.getElementsByClassName(name)：通过类名来查找元素

3.节点属性

• parentNode：返回节点的父节点

  
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
  

  效果展示：
  

• childNodes：返回子节点集合，childNodes[i]

  
      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  
  

  效果展示：
  
  下面同理，这里就不做展示了。

• firstChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

• lastChild：返回节点的最后一个子节点

• nextSibling：下一个节点

• previousSibling：上一个节点

• firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元 素的文本节点

• lastElementChild：返回节点的最后一个子节点

• nextElementSibling：下一个节点

• previousElementSibling：上一个节点

4.节点信息

①节点信息

• nodeName：节点名称

      
  
          
  1
          
  2
          
  3
          
  4
          
  5
          
  6
      
  

  效果展示：
  

• nodeValue：节点值

  效果展示：
  

• nodeType：节点类型

  效果展示：
  
  ②节点类型的值（nodeType）

  • 元素element：1
  • 属性attr：2
  • 文本text：3
  • 注释comments ：8
  • 文档document ：9

5.操作节点

①操作节点的属性

• getAttribute(“属性名”)：获取属性

  我是一只小小鸟
  

  效果展示：
  

• setAttribute(“属性名”,“属性值”)：设置属性值

  我是一只小小鸟
  

  效果展示：
  

②创建和插入节点

• createElement( tagName)：创建一个标签名为tagName的新元素节点
• A.appendChild( B)：把B节点追加至A节点的末尾
• insertBefore( A,B )：把A节点插入到B节点之前
• cloneNode(deep)：复制某个指定的节点

③删除和替换节点

• removeChild( node) 删除指定的节点
• replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点

⑤style属性
语法：HTML元素.style.样式属性＝"值"
例如：document.getElementById("a").style.color="red";
⑥className属性
语法：HTML元素.className="样式名称"
例如：document.getElementById("a").className="class1";
⑦获取元素样式
语法：HTML元素.style.样式属性;

6.HTML中元素属性

• offsetLeft：返回当前元素左边界到它上级元素的左边界的距离，只读属性
• offsetTop：返回当前元素上边界到它上级元素的上边界的距离，只读属性
• offsetHeight：返回元素的高度
• offsetWidth：返回元素的宽度
• offsetParent：返回元素的偏移容器，即对最近的动态定位的包含元素的引用
• scrollTop：返回匹配元素的滚动条的垂直位置
• scrollLeft：返回匹配元素的滚动条的水平位置
• clientWidth：返回元素的可见宽度
• clientHeight：返回元素的可见高度