JavaScript之HTML DOM

1.  理解HTML DOM

1.1.      HTML的文档结构

<html>

   <head>

      <title>文档标题title>

   head>

   <body>

      <h1>我的标题h1>

      <ahref="">我的链接a>

   body>


html>

 

1.2.      DOM模型

l  DOM= Document ObjectModel,文档对象模型, DOM 是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:独立于平台和语言的接口. W3C DOM 标准被分为 3 个不同的部分:

n  核心 DOM - 针对任何结构化文档的标准模型

n  XML DOM - 针对 XML 文档的标准模型

n  HTML DOM - 针对 HTML 文档的标准模型

1.3.      HTML节点

l  HTML文档中的每个成分都是一个节点。

n  整个文档是一个文档节点(Document)

n  每个 HTML 标签是一个元素节点(Element)

n  每一个 HTML 属性是一个属性节点(Attribute)

n  包含在 HTML 元素中的文本是文本节点(Text)

2.  DOM的CRUD

2.1.      HTML节点的查询

对象类型

属性/方法

说明

文档

getElementById(id)

根据标签的id得到对应的标签对象

文档

getElementsByTagName(tag)

根据标签名得到对应的所有子标签对象的集合(数组)

 

 

 

节点

nodeName  标签节点

得到节点名

节点

nodeValue Text/Attr

得到节点的值

节点

nodeType

节点类型值

 

 

 

元素节点

childNodes

得到所有子节点的集合(数组)

元素/文本节点

parentNode

得到父节点对象(标签)

元素节点

firstChild

得到第一个子节点(标签/文本)

元素节点

lastChild

得到最后一个子节点(标签/文本)

 

 

 

元素节点

getAttribute(attrName)

根据属性名得到属性值

 

2.2.      HTML节点的增删改

对象类型

属性/方法

说明

文档节点

createElement(tagName)

创建一个新的元素节点对象

文档节点

createTextNode(text)

创建一个文本节点对象

document

 

 

元素节点

appendChild(node)

将指定的节点添加为子节点

元素节点

insertBefore(new,target)

在指定子节点的前面插入新节点

element

 

 

元素节点

replaceChild(new, old)

用新节点替换原有的旧子节点

元素节点

removeChild(childNode)

删除指定的子节点

元素节点

setAttribute(name, value)

为标签添加一个属性

元素节点

removeAttribute(name)

删除指定的属性

 

 

 

元素节点

innerHTML

向标签中添加一个标签

 

 

<styletype="text/css">

ul {

    list-style-type: none;

}

 

li {

    border-style: solid;

    border-width: 1px;

    padding: 5px;

    margin: 5px;

    background-color: #99ff99;

    float: left;

}

 

.out {

    width: 400px;

    border-style: solid;

    border-width: 1px;

    margin: 10px;

    padding: 10px;

    float: left;

}

style>

head>

<body>

    <divclass="out">

       <p>你喜欢哪个城市?p>

       <ulid="city">

           <liid="bj">北京li>

           <li>上海li>

           <liid="dj">东京li>

           <li>首尔li>

       ul>

       <br>

       <divid="inner">div>

    div>

body>

<scripttype="text/javascript">

    /*

       1. 得到idbj标签的文本

    */

   

    /*

       2. 得到可选城市的数量

    */

   

    /*

       3. idinner的标签中插入文本

    */

script>

 

3.  DOM的事件监听

3.1.      添加事件监听

页面的很多交互操作都是通过在一些页面视图上添加事件监听的方式来实现的

给标签添加事件属性

onclick="showMsg()">Click Me

 

得到标签对象并给其添加事件属性, 属性值为一个函数

var btnEle = document.getElementById("btn");

btnEle.onclick = function(){

alert("Thank you, baby!!!!!");

};

 

3.2.      常用事件

属性

描述

onclick

回调函数

当鼠标被单击时执行脚本

ondblclick

回调函数

当鼠标被双击时执行脚本

onmousedown

回调函数

当鼠标按钮被按下时执行脚本

onmousemove

回调函数

当鼠标指针移动时执行脚本

onmouseout

回调函数

当鼠标指针移出某元素时执行脚本

onmouseover

回调函数

当鼠标指针悬停于某元素之上时执行脚本

onmouseup

回调函数

当鼠标按钮被松开时执行脚本

onload

回调函数

当文档被载入时执行脚本

onchange

回调函数

当元素改变时执行脚本

onsubmit

回调函数

当表单被提交时执行脚本

onreset

回调函数

当表单被重置时执行脚本

onselect

回调函数

当元素被选取时执行脚本

onblur

回调函数

当元素失去焦点时执行脚本

onfocus

回调函数

当元素获得焦点时执行脚本






Insert title here



	

你喜欢哪个城市?

  • 北京
  • 上海
  • 东京
  • 首尔






DOM的事件监听



	




你可能感兴趣的:(web)