DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点
如本例
通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点
<html>
<body>
<div id="d1">hello HTML DOM</div>
</body>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
</html> document.getElementById 通过id获取元素节点
getElementsByTagName 通过标签名称获取元素节点
getElementsByClassName 通过类名获取元素节点
getElementsByName 通过表单元素的name获取元素节点
null 为什么会获取不到?
attributes 获取属性节点
childNodes 获取内容节点 nodeName 节点名称
nodeValue 节点值
nodeType 节点类型
innerHTML 元素的文本内容
id
value
className 元素上的属性 显示和隐藏
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<br>
<br>
<div id="d">
这是一个div
</div>
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
改变背景色
<div id="d1" style="background-color:pink">Hello HTML DOM</div>
<button onclick="change()">改变div的背景色</button>
<script>
function change(){
var d1 = document.getElementById("d1");
d1.style.backgroundColor="green";
}
</script> onfocus
onblur 焦点事件
onmousedown
onmouseup
onmousemove
onmouseout 鼠标事件
onkeydown
onkeypress
onkeyup 键盘事件
onclick
ondblclick 点击事件
onchange 变化事件
onsubmit 提交事件
onload 加载事件
this 当前组件
return false 阻止事件的发生 parentNode 父节点关系
previousSibling
nextSibling 同胞节点关系
childNodes 子节点关系
childNodes
children childNodes和children的区别
childNodes 会包含文本节点
children 会排除文本节点 createElement 创建元素节点
createTextNode 创建文本节点
createAttribute 创建属性节点 removeChild 删除元素节点
removeAttribute 删除属性节点
removeChild 删除文本节点 replaceChild appendChild 追加节点
insertBefore 在前方插入节点原文：https://www.cnblogs.com/lyjs0012/p/12380687.html