javascript之DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、元素查找

　　1、直接查找

 document.getElementById             根据ID获取一个标签

 document.getElementsByName          根据name属性获取标签集合

 document.getElementsByClassName     根据class属性获取标签集合

 document.getElementsByTagName       根据标签名获取标签集合

　　2、间接查找

 parentNode          // 父节点

 childNodes          // 所有子节点

 firstChild          // 第一个子节点

 lastChild           // 最后一个子节点

 nextSibling         // 下一个兄弟节点

 previousSibling     // 上一个兄弟节点

 parentElement           // 父节点标签元素

 children                // 所有子标签

 firstElementChild       // 第一个子标签元素

 lastElementChild        // 最后一个子标签元素

 nextElementtSibling     // 下一个兄弟标签元素

 previousElementSibling  // 上一个兄弟标签元素

二、操作

　　1、内容

 innerText   文本

 outerText

 innerHTML   HTML内容

 innerHTML

 value       值

　　2、属性

 attributes                // 获取所有标签属性

 setAttribute(key,value)   // 设置标签属性

 getAttribute(key)         // 获取指定标签属性

 /*

 var atr = document.createAttribute("class");

 atr.nodeValue="democlass";

 document.getElementById('n1').setAttributeNode(atr);

 */

　　3、class操作

 className                // 获取所有类名

 classList.remove(cls)    // 删除指定类

 classList.add(cls)       // 添加类

　　4、标签操作

 a.创建标签

 // 方式一

 var tag = document.createElement('a')

 tag.innerText = "wupeiqi"

 tag.className = "c1"

 tag.href = "http://www.cnblogs.com/wupeiqi"

 // 方式二

 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

 b.操作标签

 // 方式一

 var obj = "<input type='text' />";

 xxx.insertAdjacentHTML("beforeEnd",obj);

 xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

 // 方式二

 var tag = document.createElement('a')

 xxx.appendChild(tag)

 xxx.insertBefore(tag,xxx[1])

　　5、样式操作

 var obj = document.getElementById('i1')

 obj.style.fontSize = "32px";

 obj.style.backgroundColor = "red";

　　6、位置操作

 总文档高度

 document.documentElement.offsetHeight

 当前文档占屏幕高度

 document.documentElement.clientHeight

 自身高度

 tag.offsetHeight

 距离上级定位高度

 tag.offsetTop

 父定位标签

 tag.offsetParent

 滚动高度

 tag.scrollTop

 /*

     clientHeight -> 可见区域：height + padding

     clientTop    -> border高度

     offsetHeight -> 可见区域：height + padding + border

     offsetTop    -> 上级定位标签的高度

     scrollHeight -> 全文高：height + padding

     scrollTop    -> 滚动高度

     特别的：

         document.documentElement代指文档根节点

 */

　　7、提交表单

 document.geElementById('form').submit()

　　8、其他操作

 console.log                 输出框

 alert                       弹出框

 confirm                     确认框

 // URL和刷新

 location.href               获取URL

 location.href = "url"       重定向

 location.reload()           重新加载

 // 定时器

 setInterval                 多次定时器

 clearInterval               清除多次定时器

 setTimeout                  单次定时器

 clearTimeout                清除单次定时器

三、事件

　　对于事件需要注意的要点：

this
event
事件链以及跳出

　　this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset='utf-8' />

         <title></title>

         <style>

             .gray{

                 color:gray;

             }

             .black{

                 color:black;

             }

         </style>

         <script type="text/javascript">

             function Enter(){

                var id= document.getElementById("tip")

                id.className = 'black';

                if(id.value=='请输入关键字'||id.value.trim()==''){

                     id.value = ''

                }

             }

             function Leave(){

                 var id= document.getElementById("tip")

                 var val = id.value;

                 if(val.length==0||id.value.trim()==''){

                     id.value = '请输入关键字'

                     id.className = 'gray';

                 }else{

                     id.className = 'black';

                 }

             }

         </script>

     </head>

     <body>

         <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>

     </body>

 </html>

搜索框

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset='utf-8' >

         <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>

         <script type='text/javascript'>

             function Go(){

                 var content = document.title;

                 var firstChar = content.charAt(0)

                 var sub = content.substring(1,content.length)

                 document.title = sub + firstChar;

             }

             setInterval('Go()',1000);

         </script>

     </head>

     <body>

     </body>

 </html>

跑马灯

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .style_before {

             color: lightgrey;

         }

         .style_after {

             color: black;

         }

     </style>

 </head>

 <body>

     <h3>爱好</h3>

     <div>

         <ul id="i1">

             <li><input type="checkbox" value="">篮球</li>

             <li><input type="checkbox" value="">足球</li>

             <li><input type="checkbox" value="">乒乓球</li>

         </ul>

     </div>

     <button onclick="Cheakall()">全选</button>

     <button onclick="Cancleall()">取消全选</button>

     <button onclick="Reversall()">反选</button>

     <script>

         function Cheakall() {

             var i1 = document.getElementById("i1");

             var cheak = i1.getElementsByTagName("input");

             for (i=0;i<cheak.length;i++) {

                 cheak[i].checked = true;

             }

         }

         function Cancleall() {

             var i1 = document.getElementById("i1");

             var cheak = i1.getElementsByTagName("input");

             for (i=0;i<cheak.length;i++) {

                 cheak[i].checked = false;

             }

         }

         function Reversall() {

             var i1 = document.getElementById("i1");

             var cheak = i1.getElementsByTagName("input");

             for (i=0;i<cheak.length;i++) {

                 if (cheak[i].checked) {

                     cheak[i].checked = false;

                 }else {

                     cheak[i].checked = true;

                 }

             }

         }

     </script>

 </body>

 </html>

全选与反选

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide {

             display: none;

         }

         .c1 {

             position: fixed;

             top: 0;

             right: 0;

             bottom: 0;

             left: 0;

             background: rgba(0,0,0,.6);

             z-index: 2;

         }

         .c2 {

             position: fixed;

             width: 400px;

             height: 300px;

             top: 50%;

             left: 50%;

             z-index: 3;

             margin-top: -150px;

             margin-left: -200px;

             background-color: white;

             text-align: center;

             padding-top: 150px;

         }

     </style>

 </head>

 <body>

     <div><input type="button" value="登录" onclick="hihi()"></div>

     <div id="cc1" class="c1 hide"></div>

     <div id="cc2" class="c2 hide">

         <div>用户名：<input type="text"></div>

         <div>密 码：<input type="text"></div>

         <input type="button" value="确定">

         <input type="button" value="取消" onclick="hisl()">

     </div>

     <script>

         function hihi() {

             document.getElementById("cc1").classList.remove("hide");

             document.getElementById("cc2").classList.remove("hide");

         }

         function hisl() {

             document.getElementById("cc1").classList.add("hide");

             document.getElementById("cc2").classList.add("hide");

         }

     </script>

 </body>

 </html>

静态对话框

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             margin: 0;

             background-color: #dddddd;

         }

         .w{

             margin: 0 auto;

             width: 980px;

         }

         .pg-header{

             background-color: black;

             color: white;

             height: 48px;

         }

         .pg-body .menu{

             position: absolute;

             left: 200px;

             width: 180px;

             background-color: white;

             float: left;

         }

         .pg-body .menu .active{

             background-color: #425a66;

             color: white;

         }

         .pg-body .fixed{

             position: fixed;

             top: 10px;

         }

         .pg-body .content{

             position: absolute;

             left: 385px;

             right: 200px;

             background-color: white;

             float: left;

         }

         .pg-body .content .item{

             height: 900px;

         }

     </style>

 </head>

 <body onscroll="Hua();">

     <div class="pg-header">

         <div class="w"></div>

     </div>

     <div class="pg-body">

         <div id="menu" class="menu">

             <ul>

                 <li>第一章</li>

                 <li>第二章</li>

                 <li>第三章</li>

             </ul>

         </div>

         <div id="content" class="content">

             <div class="item">床前明月管</div>

             <div class="item">疑是地上霜</div>

             <div class="item" style="height: 100px">我是郭德纲</div>

         </div>

     </div>

     <script>

         function Hua() {

             var xo = document.getElementById("menu");

             var huaGao = document.body.scrollTop;

             if (document.body.scrollTop>48){

                 xo.classList.add("fixed");

             }else {

                 xo.classList.remove("fixed");

             }

             var bod = document.body.offsetHeight;

             var conAbs = document.getElementsByClassName("content")[0].offsetHeight;

             var ck = document.documentElement.clientHeight;

 //            console.log((bod + conAbs) == (ck + huaGao));

             if ((bod + conAbs) == (ck + huaGao)) {

                 var lenLi = xo.getElementsByTagName("li");

                 for (var i=0;i<lenLi.length;i++){

                     if (i == lenLi.length - 1){

                         lenLi[i].className = "active";

                     }else {

                         lenLi[i].className = "";

                     }

                 }

                 return

             }

             var item = document.getElementById("content").children;

             for (var i=0;i<item.length;i++){

                 var currentItem = item[i];

                 var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;

                 var currentItemWindowTop = currentItemBodyTop - huaGao;

                 var currentHeight = currentItem.offsetHeight;

                 var bottomHeight = currentItemBodyTop + currentHeight;

                 var ziJi = xo.getElementsByTagName("li")[i];

                 if (currentItemWindowTop<0 && huaGao < bottomHeight){

                     ziJi.className = "active";

                 } else {

                     ziJi.className = "";

                 }

             }

         }

     </script>

 </body>

 </html>

书签与章节

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         ul{

             list-style: none;

             padding: 0;

             margin: 0;

         }

         ul li{

             float: left;

             background-color: #2459a2;

             color: white;

             padding: 8px 10px;

         }

         .clearfix:after{

             display: block;

             content: '.';

             height: 0;

             visibility: hidden;

             clear: both;

         }

         .hide{

             display: none;

         }

         .tab-menu .title{

             background-color: #dddddd;

         }

         .tab-menu .title .active{

             background-color: #0099dd;

             color: black;

         }

         .tab-menu .content{

             border: 1px solid #dddddd;

             min-height: 150px;

         }

         ul li:hover {

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div style="width: 400px; margin: 0 auto;">

         <div class="tab-menu">

             <div class="title clearfix">

                 <ul>

                     <li target="h1" class="active" onclick="Show(this);">索尼</li>

                     <li target="h2" onclick="Show(this);">谷歌</li>

                     <li target="h3" onclick="Show(this);">腾讯</li>

                 </ul>

             </div>

             <div id="content" class="content">

                 <div con="h1">1...</div>

                 <div con="h2" class="hide">2...</div>

                 <div con="h3" class="hide">3...</div>

             </div>

         </div>

     </div>

     <script>

         function Show(ths) {

             var Showli = ths;

             var littarget = Showli.getAttribute("target");

             var liclass = Showli.parentNode.children;

             for (var i=0;i<liclass.length;i++) {

                 if (liclass[i].getAttribute("target") == littarget) {

                     liclass[i].classList.add("active");

                 }else {

                     liclass[i].classList.remove("active");

                 }

             }

             var liycontent = document.getElementById("content").children;

             for (var i=0;i<liycontent.length;i++) {

                 if (liycontent[i].getAttribute("con") == littarget) {

                     liycontent[i].className = "";

                 }else {

                     liycontent[i].className = "hide";

                 }

             }

         }

     </script>

 </body>

 </html>

菜单

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .go-top {

             position: fixed;

             right: 28px;

             bottom: 19px;

             width: 38px;

             height: 40px;

             background-color: aliceblue;

         }

         .hide {

             display: none;

         }

     </style>

 </head>

 <body onscroll="Func();">

     <div style="height: 2000px"></div>

     <div id="i2" class="go-top hide">

         <a onclick="GoTop();">返回顶部</a>

     </div>

     <script>

         function Func() {

             var scrolltop = document.body.scrollTop;

             var ii = document.getElementById("i2");

             if (scrolltop>300) {

                 ii.classList.remove("hide");

             }else {

                 ii.classList.add("hide");

             }

         }

         function GoTop() {

             document.body.scrollTop = 0;

         }

     </script>

 </body>

 </html>

返回顶部

javascript之DOM的更多相关文章

javascript --- javascript与DOM
javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...
JavaScript与DOM
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...
Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
JavaScript与DOM的关系
JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...
JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素创建新的 HTML 元素如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener addEventListener() 方法实例点用户点击按钮时触发监听事件: document.getElementById(& ...
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应我们可以在事件发生时执行 ...
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式如需改变 HTML 元素的样式,请使用这个语法 ...

随机推荐

《BI那点儿事》Microsoft 时序算法——验证神奇的斐波那契数列
斐波那契数列指的是这样一个数列 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584,4181,6765,10 ...
2014 -> 2015
2014年初在公司的发展不太顺利, 发现比好多小伙伴的发展速度都要慢了,钱不多,职位也不高,做的事情成长也不快. 为了职业发展考虑,年中就一直想换一个好一点的工作机会, 年中拿了好几个offer, 有 ...
邻接表有向图(二)之 C++详解
本章是通过C++实现邻接表有向图. 目录 1. 邻接表有向图的介绍 2. 邻接表有向图的代码说明 3. 邻接表有向图的完整源码转载请注明出处:http://www.cnblogs.com/skywa ...
LocationManager使用细节
在使用系统的LocationManager请求地理位置的时候,请特别注意一个很小的细节,调用 requestLocationUpdates 以后,请记得[自己]设置一个timeout值,否则在某些情况 ...
Windows Azure HandBook (2) Azure China提供的服务
<Windows Azure Platform 系列文章目录> 对于传统的自建数据中心,从底层的Network,Storage,Servers,Virtualization,中间层的OS, ...
各大IT公司校园招聘程序猿笔试、面试题集锦
转自:http://blog.csdn.net/hackbuteer1/article/details/7959921#t4 百度一面 1.给定一个字符串比如“abcdef”,要求写个函数编程“def ...
Web API应用架构在Winform混合框架中的应用（5）--系统级别字典和公司级别字典并存的处理方式
在我这个系列中,我主要以我正在开发的云会员管理系统为例进行介绍Web API的应用,由于云会员的数据设计是支持多个商家公司,而每个公司又可以包含多个店铺的,因此一些字典型的数据需要考虑这方面的不同.如 ...
【C#】让DataGridView输入中实时更新数据源中的计算列
本文适用Winform开发,且DataGridView的数据源为DataTable/DataView的情况. 理解前提:熟知DataTable.DataView 求:更好方案考虑这样一个场景: 某D ...
Stream/Bytes[]/Image对象相互转化
Stream/Bytes[]/Image对象相互转化 Stream转Byte数组.Image转Byte数组.文件转Stream等 /// <summary> /// 将 Stream 转成 ...
jquery基本选择器id
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

javascript之DOM

javascript之DOM的更多相关文章

随机推荐

热门专题