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标签 |