JavaScript的学习5

Posted on 2016-11-10 21:57 杜飞不飞阅读(144) 评论(0) 编辑收藏举报

一、DOM对象

1、DOM对象：Document Object Model 文档对象模型，主要是用来提供了操作HTML文档的属性与方法

2、DOM的分类：

a、核心DOM：为操作XML和HTML文档的提供了属性与方法

b、HTML DOM：它是用来专门操作HTML文档和XHTML文档

c、XML DOM：它是用来专门操作XML文档的就业班讲

d、CSS DOM：它是用来专门操作style这个属性

e、events DOM：事件DOM

二、核心DOM

1、核心DOM的属性

　　 firstChild 第一个子节点

　　 lastChild 最后一个子节点

　　 childNodes 子节点列表就算里面只有一个子节点它也是一个数组它和数组的访问方式一样就是通过下标来进行访问

　　 parentNode 父节点

　　 innerHTML 用来设置或者返回双边标记里面的内容

　　 nextSibling 下一个兄弟节点

　　 previousSibling 上一个兄弟节点

　　 nodeValue 节点的值

　　 nodeName 节点的名称

2、核心DOM对标签属性的操作:增删改查

例：<table width=”100”></table >

要找到操作的标签对象.setAttribute(属性名,属性值)

function setAttr(){
        //要找到操作标签对象.setAttribute();
        document.getElementById("table").setAttribute("width",500);
        document.getElementById("table").setAttribute("border",5);
        document.getElementById("table").setAttribute("bgColor","#f00");
    }

要找到操作的标签对象.getAttribute(属性名)

function getAttr(){
        //要找到操作的标签对象.getAttribute(属性名)
        alert(document.getElementById("table").getAttribute("width"));
    }

要找到操作的标签对象.removeAttribute(属性名)

function removeAttr(){
        //要找到操作的标签对象.removeAttribute(属性名)
        document.getElementById("table").removeAttribute("width");
        document.getElementById("table").removeAttribute("border");
        document.getElementById("table").removeAttribute("bgColor");
    }

3、核心DOM对标签的操作

创建标签：document.createElement(“标签名”)

追加标签：父对象.appendChild(要追加的标签对象) ；将标签对象追加父对象的末尾

　　　　　父对象.insertBefore(要追加的标签对象, 在谁之前进行追加)；　　将标签对象追加谁的最前面

移除标签：父对象.removeChild(要删除的标签对象)

三、HTML DOM

document.getElementById(ID的属性值)　　作用：通过id的属性值来获取标签对象

document.getElementsByTagName(“标签名”)　　作用：通过标签名来获取对象

document.getElementsByName(name的属性值)　　通过标签中的Name的属性值来获取元素

四、CSS DOM

CSS DOM它是用来操作标签的style属性的这里的style它也是一个对象

格式：

赋值：要操作标签对象.style.css样式属性 = “CSS属性值”

取值：要操作标签对象.style.css样式属性

五、事件

1、事件绑定的方式

行内绑定：<标签事件名=“事件的处理程序”></标签>　　　　将事件的处理程序是写在HTML标签中

动态绑定：要操作的标签对象.事件名 = 事件的处理程序　　　　将事件的处理程序是写在JS代码中

2、事件列表

onclick：当鼠标单击时

ondblclick：当鼠标双击时

onmouseover：当鼠标经过时

onmouseout：当鼠标离开时

onfocus：当获取光标焦点时

onblur：当失去焦点时

onsubmit：当表单提交时　　这个事件它是给form标签来绑定的

onchange：当内容发生改变时多用于下拉列表

刷新页面返回顶部

杜飞不飞

导航

公告

JavaScript的学习5