DOM 事件 表格及样式
DOM
什么是dom
document object model
document 文档 可以理解为 整个加载的页面
节点 节点树
节点就是一个标签 标签也可以称之为元素
节点树 可以理解为 标签的层级树
节点种类
<div title="test">python1806oangbazi</div>
- 元素节点
- 属性节点 title=”test”
- 文本节点 python1806oangbazi
查找元素
方法 |
说明 |
getElementById() |
ID |
getElementsByTagName() 数组 |
标签 |
getElementsByName 数组 |
根据name 获取 |
getElementsByClassName 数组 |
根据class 类获取 |
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.onload = function(){
var test= document.getElementsByClassName('test');
alert(test[1].innerHTML);
}
</script>
<div class="test">
123
</div>
<div class="test">
456
</div>
</body>
</html>
元素属性
属性 |
说明 |
tagName |
标签名字 |
innerHTML |
标签之间的内容 |
var test = document.getElementById('test');
var test= document.getElementsByClassName('test');
console.log(test[1].innerHTML);
console.log(test[2].tagName);
<div class="test">123</div>
<div class="test">456</div>
<p class="test">456</p>
元素属性的属性
属性 |
说明 |
id |
id名称 |
title |
title 属性值 |
style |
样式值 |
className |
类名 |
var test= document.getElementsByClassName('test');
console.log(test[0].id);
console.log(test[0].title);
console.log(test[0].style);
console.log(test[0].style.width);
<div id="test" class="text">456</div>
var test = document.getElementById('test');
console.log(test.className);
test.className = 'box';
var boxes = document.getElementsByClassName('box');
console.log(boxes[0].innerHTML);
var test= document.getElementsByClassName('test');
console.log(test.length);
给元素设置属性 及值
对象.setAttribute("属性名","值")
方法 |
说明 |
setAttribute(‘属性名’,‘属性值’) |
给指定的元素添加属性 |
removeAttribute(‘属性名’); |
移除指定元素的属性 |
var test= document.getElementsByClassName('test');
test[1].style="width:100px;height:100px;background:pink";
test[1].setAttribute("align","center");
test[1].setAttribute("bbb","ccc");
test[1].removeAttribute("style");
test[1].removeAttribute("align");
test[1].removeAttribute("bbb");
层次节点
<div>
<div title="test">python1806oangbazi</div> <div></div>
</div>
节点名称 |
nodeName |
nodeValue |
nodeType |
元素节点 |
div |
null |
1 |
属性节点 |
title |
test |
2 |
文本节点 |
text |
python1806oangbazi |
3 |
节点 |
说明 |
childNodes |
当前元素节点的所有子节点 |
firstChild |
第一个子节点 |
lastChild |
最后一个子节点 |
ownerDocument |
根节点 #document 9 |
parentNode. |
父节点 |
previousSibling |
同级节点的前一个 哥哥 |
nextSibling |
同级节点的下一个 弟弟 |
attribute |
当前元素节点的所有属性节点的集合 |
window.onload = function(){
var box = document.getElementById('ball');
console.log(box.childNodes.length);
console.log(box.childNodes[0].nodeName);
console.log(box.childNodes[0].nodeType);//如果为1 说明 box的子节点 是个元素节点 3 说明子节点就是个文本节点
console.log(box.childNodes[0].nodeValue);
}
<div id="ball">python1806oangbazi</div>
<div id="ball"> python1806<div>test</div>angbazi</div>
console.log(box.childNodes.length); //3 三个子节点 python1806 <div>test</div> angbazi
console.log(box.childNodes[1].nodeName);
console.log(box.childNodes[1].nodeType);
console.log(box.childNodes[1].nodeValue);
层级属性 示例
console.log(box.ownerDocument.nodeName)
console.log(box.ownerDocument.nodeType)
console.log(box.parentNode.nodeName)
console.log(box.firstChild.nodeName)
console.log(box.firstChild.nodeValue)
console.log(box.lastChild.nodeName)
console.log(box.lastChild.nodeValue)
console.log(box.previousSibling.nodeName)
console.log(box.nextSibling.nodeName)
console.log(box.firstChild.nextSibling.nodeName)
<span></span><div id="ball" title="text" class="test"><div>test</div><div>test</div>python1806<div>test</div>angbazi</div><p></p>
attribute
console.log(box.attributes);
console.log(box.attributes.length);
console.log(box.attributes[0]);
console.log(box.attributes[0].nodeName);
console.log(box.attributes[0].nodeValue);
console.log(box.attributes[0].nodeType);
console.log(box.attributes['id'].nodeValue);//ball
<span></span><div id="ball" title="text" class="test"><div>test</div><div>test</div>python1806<div>test</div>angbazi</div><p></p>
节点操作
方法 |
说明 |
document.write() |
将任意字符插入到文档中 |
document.createElement(‘标签名’) |
创建一个元素 |
document.appendChild(变量名) |
将目标元素插入到指定元素内部的结尾 |
document.createTextNode(‘文本’) |
创建文本节点 |
document.insertBefore() |
将元素插入到指定元素的前面 |
document.replaceChild() |
新节点 替换旧节点 |
document.removeChild() |
移除节点 |
document.cloneChild() |
复制标签 |
/*var p1 = document.createElement('p');
box.appendChild(p1);
var text = document.createTextNode('东风吹战鼓擂');
p1.appendChild(text);
var div1 = document.createElement('div');
div1.appendChild(text);
//box.parentNode.insertBefore(div1,box);
//box.parentNode.replaceChild(p1,box);
//box.parentNode.removeChild(box);*/
var clone = box.firstChild.cloneNode(true);
box.appendChild(clone);
事件
鼠标事件 on+事件名称
事件 |
说明 |
onclick |
鼠标点击的时候 |
ondblclick |
鼠标双击 |
onmouseover() |
鼠标移入 |
onmouseout() |
鼠标移出 |
onmousedown() |
按下鼠标还没有弹起的时候 触发 |
onmouseup() |
释放鼠标按钮的时候触发 |
onmousemove() |
鼠标在元素上面移动的时候触发 |
键盘事件 on+事件名称
事件 |
说明 |
onkeydown |
按下键盘上的任意键触发 按住不放重复触发 |
onkeyup |
释放键触发 |
onkeypress |
按住键盘上的键 触发 |
HTML事件
事件 |
说明 |
onblur |
失去焦点的时候 |
onfocus |
获取焦点的时候 |
onload |
整个页面完全加载完毕触发 |
onunload |
卸载页面的时候触发 |
onselect |
文本框 多行文本框 |
onchange |
内容发生变化的时候触发 |
onsubmit |
提交时候触发 |
onreset |
重置的时候触发 |
onresize |
窗口发生变化的时候触发 |
onscroll |
滚动条滚动的时候触发 |
元素.on事件名 = function(){
}
box.onclick = function(){
console.log('点击');
}
box.ondblclick = function(){
console.log('双击666');
}
box.onmousedown = function(){
console.log('按下');
}
box.onmouseup = function(){
console.log('弹起');
}
box.onmouseover = function(){
console.log('移入');
}
box.onmouseout = function(){
console.log('移出');
}
window.onkeydown = function(){
console.log('按下');
}
window.onkeyup = function(){
console.log('按下');
}
window.onkeypress = function(){
console.log('按下');
}
texts.onblur = function(){
console.log('楼上男宾两位');
}
head body
直接可以用 document.head document.body
DOM操作表格及样式
var table = document.createElement('table');
table.border = 1;
table.width=100;
table.height=100;
table.bgColor = 'red';
var caption = document.createElement('caption');
table.appendChild(caption);
var texts = document.createTextNode('人员表');
caption.appendChild(texts);
var thead = document.createElement('thead');
table.appendChild(thead);
var tr_head = document.createElement('tr');
thead.appendChild(tr_head);
var th1 = document.createElement('th');
var th2 = document.createElement('th');
var th3 = document.createElement('th');
th1.appendChild(document.createTextNode('姓名'));
th2.appendChild(document.createTextNode('性别'));
th3.appendChild(document.createTextNode('年龄'));
tr_head.appendChild(th1);
tr_head.appendChild(th2);
tr_head.appendChild(th3);
var body = document.body;
body.appendChild(table);
---------------------------麻烦的一批-----------------------------------------
属性 |
说明 |
caption |
获取表格的标题 |
tBodies |
获取标签 |
tHead |
获取标签 |
tFoot |
获取标签 |
rows |
到底有多少行 |
console.log(table.tHead.nodeName)
console.log(table.tHead.rows.length)//thead 里边有多少行
var table = document.createElement(‘table’);
方法 |
说明 |
createCaption() |
创建caption标签 |