html-day03(获取与操作Html页面的元素)

获取Html页面的元素

• 1、.根据id属性的值获取元素,返回来的是一个元素对象

document.getElementById("id属性的值");
  

• 2、.根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

document.getElementsByTagName("标签名字");
  
下面的几个,有的浏览器不支持

 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
 document.getElementsByName("name属性的值")
 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
 document.getElementsByClassName("类样式的名字")
 根据选择器获取元素,返回来的是一个元素对象
 document.querySelector("选择器的名字");

• 3、 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

 document.querySelectorAll("选择器的名字")

操作节点（元素）

1、操作节点的属性

• getAttribute("属性名")
• setAttribute("属性名","属性值")

2、操作节点样式

• style属性

语法：HTML元素.style.样式属性＝"值"，

例如：

document.getElementById("cart").style.backgroundColor="#f9f9f9";

document.getElementById("cartList").style.display="none";

• className属性

语法： HTML元素.className="样式名称"

例如：

document.getElementById("cart").className="cartOver";