js学习第五日

1. document对象

• document的概念:
  浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存HTML文档的所有的信息

• 获取document
  直接获取方式:
  a.通过id
  b.通过name属性值
  c.通过标签名
  d.通过class属性
  间接获取方式:
  a.父子关系
  b.子父关系
  c.兄弟关系

2. js操作HTML

• 获取元素属性:
  元素对象名.属性名//返回当前固有属性值
  元素对象名.getAttribute(“属性名”);//返回自定义属性值

• 修改元素属性:
  元素对象名.属性值 = 新的值
  元素对象名.setAttribute(“属性名”,“属性值”);//修改自定义属性值
  注意:使用自定义方式获取固有属性值,value的值获取的是默认值,不能获取到实时的用户数据

• 获取元素对象:
  元素对象名.innerHTML //返回当前元素对象的所有内容,包括HTML标签
  元素对象名.innerText //返回当前元素对象的文本内容,不包括HTML标签

• 修改元素对象:
  元素对象名.innerHTML = “新的值” //会将原有内容覆盖,HTML标签会被解析
  元素对象名.innerText = “新的值” //会将原有内容覆盖,但HTML标签不会被解析

• js操作元素样式:
  a.通过style属性:
  元素对象名.style.样式名 = “样式值” //添加或修改
  元素对象名.style.样式名 = “” //删除样式
  b.通过className:
  元素对象名.className = “新的值” //添加类选择器样式或者修改类选择器样式
  元素对象名.className = “” //删除类选择器样式

• js操作HTML文档结构
  增加节点:div.innerHTML = div.innerHTML + “内容”
  删除所有子节点:div.innerHTML = “”;
  删除指定子节点:父节点.removeChild(子节点对象)
  创建新的子节点:document.createElement(“标签名”);
  添加子节点:元素对象名.appendChild();