元素操作及节点操作

目录

元素操作

更改标签内容

更改元素属性内容

更改元素标签样式

节点操作

---

元素操作

更改标签内容

方1：自定义变量名 . innerText = ' 内容 ' ;

方2：自定义变量名 . innerHTML = ' 内容 ' ; （常用）

更改元素属性内容

1.图片类

  img . src  /  img . title  /  img .  alt  = '  内容  ' ;

2.表单元素类

  ① input . value  /  input . placeholder = '  内容  ' ;

  ② input . type = ' 各种类型框 ' ;

  ③ input . checked / input . selected / input . disabled = ' true / false ' ;

3.其他通用类

• 获取元素属性值

  ① 自定义变量名 . 属性 ;

  ② 自定义变量名 . getAttribute ( ' 属性 ' ) ; （获取自定义属性值）

• 设置元素属性值

  ① 自定义变量名 . 属性 = ' 值 ' ;

  ② 自定义变量名 . setAttribute ( ' 属性 '  , ' 值 ' ) ; （设置自定义属性值）

• 移除元素属性值

  ① 自定义变量名 . removeAttribute ( ' 属性 ' ) ; 

注意：H5自定义属性要以  " data - "  开头做属性名并赋值。

更改元素标签样式

方1：自定义变量名 . style . 对应样式（驼峰命名法） = '  内容  ' ;

方2：自定义变量名 . className = ' 对应类名 ' ;  (会覆盖原来的类名)

节点操作

 — — 利用父子兄关系获取元素

• 父级节点

形式：子元素自定义变量名 . parentNode；

使用：采用就近的方式，返回该元素的父亲节点，没有则返回NULL。

• 子节点

  ① 以数组的形式，返回父元素下的所有 子元素节点

   形式：父元素自定义变量名 . children

  ② 返回父元素下的 第一个或最后一个 子元素节点

   方1形式：父元素自定义变量名 . first / lastElementChild

   方2形式：父元素自定义变量名 . children [0] / children [父元素自定义变量名 .children.length-1]（常用）

• 兄弟节点

  ①  返回 上一个兄弟节点 或 下一个兄弟节点（返回的兄弟节点包括 元素节点 及 文本节点）

   形式：兄弟元素自定义变量名 . nextSibling / previousSibling

  ② 返回 上一个兄弟节点 或 下一个兄弟节点（返回的兄弟节点只包括 元素节点 ）

   形式：兄弟元素自定义变量名 . nextElementSibling / previousElementSibling（常用）

• 创建节点

形式：document . creatElement ( ' 元素标签名 ' )；

注意：创建后要进行添加插入，元素标签名可填 li 、div 、span 等

• 添加节点

① 尾插法

形式：父元素自定义变量名 . appendchild ( 创建节点名 )；

② 头插法 （ 将其插入指定元素前面 ）

形式：父元素自定义变量名 . insertBefore ( 创建节点名 ，指定自定义变量名元素 )；

• 删除节点

形式：父元素自定义变量名 . removechild ( 子元素自定义变量名 )；( 返回删除节点 )

• 复制节点

形式：自定义变量名 . cloneNode ( 参数 )；

注意：复制后要进行添加插入，当参数为 true 时，深度拷贝 会复制本身及所有子节点；当参数为 空 时，浅度拷贝 只会复制本身。