1.通过style属性直接设置
2.通过className属性设置类选择器
3.可以通过classList属性添加多个类选择器
*** 作DOM的内容：
1.innerText属性，用于获取 和 *** 作 DOM的文本内容
2.innerHTML属性，用于获取 和 *** 作 DOM的HTML内容
创建和删除DOM元素：
createElement()方法，用于创建DOM元素
appendChild()方法，用于在当前DOM元素中添加子元素
删除元素有两种写法：
1.自删remove()方法，是元素删除自己
2.通过父级删除子级removeChild()方法，是删除元素里面指定的子元素
知识点：onclick是点击事件，on表示当，click表示点击
parenElement 和 parentNode属性，返回父级元素
鼠标事件
添加节点append；移除节点removeChild；移动节点：var sdds=document.getElementById；创建节点createTextNode()；查找节点：document.getElementsByTagName。
其他方法：
创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
查找
getElementsByTagName() //通过标签名
称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
实现一个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var $ = function(args){
return document.getElementById(args)
}
var add = $("add")
var rep = $("replace")
var rem = $("remove")
var dom, h
add.onclick = function(){
//新增
dom = document.createElement("p")
dom.innerHTML="<span style='color:red'> 这是一个被p标记包含的 span 标签</span>"
document.body.appendChild(dom)
}
rep.onclick = function(){
//替换
h = document.createElement("h1")
h.innerHTML="<span style='color:green'> 这是一个被h1标记包含的 span 标签</span>"
document.body.replaceChild(h,dom)
dom = null
}
rem.onclick = function(){
//删除
if(dom){
document.body.removeChild(dom)
}else if(h){
document.body.removeChild(h)
}
}
}
</script>
</head>
<body>
<input type="button" value="新增" id="add"/>
<input type="button" value="替换" id="replace"/>
<input type="button" value="删除" id="remove"/>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）