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 元素的样式,请使用这个语法 ...

随机推荐

selenium-webdriver(python) (十三) -- cookie处理
本节重点: driver.get_cookies() 获得cookie信息 add_cookie(cookie_dict) 向cookie添加会话信息 delete_cookie(name) 删 ...
10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
.NET知识结构
.NET知识结构 .NET介绍微软.NET战略及技术体系,.NET Framework框架类库(FCL),公共语言运行时(CLR),通用类型系统(CTS),公共语言规范(CLS),程序集(Assem ...
Spring定时器，定时执行（quartz）
这个定时器与继承了timertask的定时器不同的是,这个定时器是更强大的,可以指定每分的第n秒,每天的第n时,每周的.每年的.来定时运行这个定时器.那么下面来讲诉如何使用quartz定时器. spr ...
Windows Azure Service Bus (1) 基础
<Windows Azure Platform 系列文章目录> 我们在基于Windows Azure进行云端开发的时候,云端的软件通常都需要与其他软件进行交互.这些其他软件可能包括其他In ...
精品资源：40个实用的 PSD 贴纸模板《下篇》
贴纸经常被网页设计师用于为标注网站中的不同元素,以此吸引访客的注意.此外,使用贴纸也使网站更具吸引力.虽然设计者可以使用 Photoshop 制作贴纸,但他们也可以利用从互联网上下载现成的模板.这些模 ...
CSS魔法堂：你真的懂text-align吗？
前言也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...
JAVA - JAVA编译运行过程
Java编译原理 *.java→*.class→机器码 java编译器 (编译) → 虚拟机(解释执行) → 解释器(翻译) → 机器码 1.Java编译过程与c/c++编译过程不同 Java编译程 ...
[Asp.net 5] DependencyInjection项目代码分析2-Autofac
Microsoft.Framework.DependencyInjection.Autofac源码分析该工程只有一个代码静态类AutofacRegistration,但是该类有3个扩展方法,以及3个 ...
Configure Amazon RDS mysql to store Chinese Characters
Configure Amazon RDS mysql to store Chinese Characters https://dev.mysql.com/doc/refman/5.7/en/chars ...

javascript之DOM

javascript之DOM的更多相关文章

随机推荐

热门专题