JavaScript之DOM操作

一、对元素进行操作

1.动态生成元素

  createElement()用于生成一个元素。

语法格式：
createElement(’ ')

var oInput = docunment.createElement('input');

2.在尾部插入一个元素

  appendChild()用于在尾部插入元素；
 即插入到该元素子级的最后方。

语法格式：
appendChild( )

    var oInput = document.createElement('input');
    document.body.appendChild(oInput);

//练习
  var oInput = document.createElement('input');
    oInput.type = 'button';
    oInput.value='我是一个小按钮';
    document.body.appendChild(oInput);

3.在指定位置插入元素

  insertBefore()用于在指定的位置插入元素。
第一个参数，是要插入的元素，第二个参数是插入指定元素的前面

语法格式：
insertBefore(要插入的元素，要被替换的元素)

outNode.insertBefore(oDiv,div1)

4.替换指定元素

  replaceChild()用于替换子级元素。

语法格式：

replace(插入到指定元素前面的元素，要替代的元素)

var Ipt =docunment.createElement('input');
outNode.replaceChild(Ipt,outNode.children[0]);

5.删除子级元素

  remove()用于删除子级元素

outNode.removeChild(Span);

   remove()只能删除父级元素里面的第一级元素。不能跨层使用。

//当不知道父级元素的名字的时候可以这样使用
Span.parentNode.removeChild(Span);

6.删除自身元素

  remove()用于把自己删了

//我要切腹自尽！
Span.remove();
outNode.Children[0].remove();

7.innerHTML

  innerHTML用于设置元素内容

div1.innerHtml = div1.innerHTML +'123';

如果赋值，就是先清空里面的内容，再加上新内容
如果是+=，不会清空，直接加上新内容

二、对属性进行操作

1.属性的设置（setAttribute）

setAttribute(属性，属性值);
eg:		A.setAttribute(herf,'http:wwww.baidu.com')

就可以显示在页面的元素的上面了

//只想挂属性，不挂值
setAttribute(属性，"  ")

2.属性的获取（getAttribute）

getAttribute(属性)
eg:		console.log(A.getAttribute('fs'))；

3.属性的删除（removeAttribute）

removeAttribute(属性)
eg：	A.removeAttirbute(属性)

4.属性的检测（hasAttribute）

hasAttribute(属性)
eg：	A.hasAttirbute(属性)
//如果元素有这个属性，将会返回true，没有就flase

三、对类的控制

1.className

  className是控制类的最基本的方式。

A.className
console.log(A.className);

  可以返回或者设置元素的className

2.classList

A.classList

2.1 classList.add

//用于添加一个类（className）
A.classList.add('div1');

2.2 classList.remove

//用于删除一个类（className）
A。classList.remove('div1');

2.3 classList.contains

//用于判断classList中是否包含这个类（className）
console.log(A.classList.contains('div1'));

  如果有，将返回true，没有返回false

2.4 classList.toggle

/* 用于切换类（className）
如果有，则删除该类，如果没有，则添加此类 */
A.classList.toggle('div1');

---

还有一件事！

你如果觉得我的笔记对你有用，可以来个点赞、收藏、加关注吗
  有问题可以评论区或者私信问我