DOM 中常用的属性操作

DOM属性操作

1. 内置：官方提供，直接使用

   • html属性（可见属性）：写在标签内

   • id，class，title，style，value

   • 操作方式

     • 作为对象操作即可：点语法和中括号语法
     • get/set/removeAttribute方法操作

   • js属性（不可见属性）：将元素节点作为对象使用

     • innerHTML，innerText，children，firstChild，lastChild，…
     • 操作方式
       • 作为对象操作即可：点语法和中括号语法

2. 非内置：自定义，自己写，官方没有提供

   • html属性（可见属性）

     • 操作方式
       • 写在html标签内，无非是可以通过js的某些语句写到html标签上
         • 查询：元素.getAttribute(“要查询的名字”)
         • 增加或修改：元素.setAttribute(“要修改或增加的名字”,“对应的值”)
         • 删除：元素.removeAttribute(“要删除的名字”)
       • 不能作为对象操作

   • js属性（不可见属性）

     • 将元素节点作为对象使用
     • 操作方式
       • 作为对象操作即可：点语法和中括号语法

DOM 样式操作

1. 行内：其实就是内置的html的style属性的操作

   • 获取：style属性
   • 设置：style属性
   • 删除：样式没有删除，只有覆盖，或清空
   • style属性的值是对象，对象内，才是各种css样式
     • 注意所有的样式值，最好都写成字符
     • 注意某些样式的值，的单位
     • 注意拼接单词样式的驼峰式：如：fontSize，backgroundColor

2. 非行内：专用语句

   • getComputedStyle(元素,false).css属性
   • 兼容：低版本IE
     • 元素.currentStyle.css属性
   • 只能获取不能设置
   • 兼容封装…

3. 样式的操作

   • 获取：使用getComputedStyle(元素,false).css属性
   • 设置：元素.style.样式 = 样式值

元素的操作

1. 标签的增删改查

   • 创建元素节点对象

     • document.createElement(“标签名”)
     • 插入节点
       • 父元素.appendChild(元素节点)

   • 删除元素节点对象

     • 元素.remove();
     • 父元素.removeChild(子元素);

   • 改：慎用

     • 元素.outerHTML

   • 查：选择器

2. 文本节点

   • document.createTextNode(“要创建的文本”)
   • 插入节点
     父元素.appendChild(文本节点)

3. 插入

   • 父元素.appendChild(节点)
   • 父元素.insertBefore(要插入的节点, 插入到哪个节点之前)

获取元素的尺寸类专用属性

• offsetWidth，offsetHeight：元素包含边框以内的尺寸，包含滚动条自身尺寸，即border + padding + width(height)
• clientWidth padding+width 元素可视区域尺寸，内边距以内的减去滚动条自身尺寸后的尺寸。 padding + width(height) - 滚动条自身尺寸
• scrollWidth，scrollHeigth：元素内边距以内的尺寸，>= clientWidth(clientHeight)

节点的区分

1. DOM中所有成份都是节点，节点的数据类型都是对象
2. 节点的分类、获取节点
   • 元素节点对象
   • 文本节点对象
   • 注释节点对象
   • 根节点对象
   • 属性节点对象
3. 获取
   • 获取子节点
     • 元素节点.childNodes
   • 获取属性节点
     • 元素节点.attributes
4. 如何区分节点
   • 节点对象.nodeName
   • 节点对象.nodeType
   • 节点对象.nodeValue

节点	nodeType	nodeName	nodeValue
元素	1	大写标签名	null
文本	3	#text	文本内容
注释	8	#comment	注释内容
属性	2	属性名	属性值
根	9	#document	null