JavaScript的学习5

Posted 2020-08-19

一、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：当内容发生改变时  多用于下拉列表