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.getElementById('test');
                //var test = document.getElementsByTagName('div');
                //var test= document.getElementsByName('test');
                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.getElementsByTagName('div');
//var test= document.getElementsByName('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[1].innerHTML);
//console.log(test[2].tagName);
console.log(test[0].id);
console.log(test[0].title);
console.log(test[0].style);//[object CSSStyleDeclaration]
console.log(test[0].style.width);


<div id="test" class="text">456</div>
var test = document.getElementById('test');
console.log(test.className); //获取class
test.className = 'box'; //设置class名   ******
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"><div title="test" >python1806oangbazi</div></div>-->
<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);//#document
console.log(box.ownerDocument.nodeType);//9代表根
console.log(box.parentNode.nodeName);//BODY 父节点
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); //span   换行 和 空格 认为是文本节点 
console.log(box.nextSibling.nodeName); //p
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);

事件

鼠标事件
键盘事件
html事件

鼠标事件 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);  //获取到thead标签
console.log(table.tHead.rows.length)//thead 里边有多少行

var table = document.createElement(‘table’);

方法	说明
createCaption()	创建caption标签

DOM 事件 表格及样式

DOM 事件 表格及样式

DOM

什么是dom

节点 节点树

节点种类

查找元素

元素属性

元素属性的属性

给元素设置属性 及值

层次节点

层级属性 示例

attribute

节点操作

事件

鼠标事件 on+事件名称

键盘事件 on+事件名称

HTML事件

DOM操作表格及样式

猜你喜欢

DOM 事件表格及样式

DOM 事件表格及样式

节点节点树

给元素设置属性及值

层级属性示例