目录
- 一、对元素进行操作
- 1.动态生成元素
- 2.在尾部插入一个元素
- 3.在指定位置插入元素
- 4.替换指定元素
- 5.删除子级元素
- 6.删除自身元素
- 7.innerHTML
- 二、对属性进行操作
- 1.属性的设置(setAttribute)
- 2.属性的获取(getAttribute)
- 3.属性的删除(removeAttribute)
- 4.属性的检测(hasAttribute)
- 三、对类的控制
- 1.className
- 2.classList
- 2.1 classList.add
- 2.2 classList.remove
- 2.3 classList.contains
- 2.4 classList.toggle
一、对元素进行操作
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 +'<span>123</span>';
如果赋值,就是先清空里面的内容,再加上新内容
如果是+=,不会清空,直接加上新内容
二、对属性进行操作
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');