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

随机推荐

Cocos2d-x 3.2 学习笔记（二）创建自定义项目
一.通过命令创建项目前面搭建好环境后,怎样创建自己的cocos2d-x项目呢? 先来看看cocos2dx 3.2的目录吧(涉及到3.1.1版本的,请自动对应3.2版本,3.x版本的环境搭建都是一样的 ...
HTML5的学习--performance
HTML5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析. 它是浏览器的直接实现,比在网页中用js设置D ...
[Qt5] How to connect c++ with QML
Qt5处于过度阶段,架构繁琐,学习成本不低.尤其是UI代码竟然被重写,变了天. Qt中的c++可能是连接OPENCV与QML的一个不错的桥梁,在此学习这部分实用的技术. Reference: http ...
这10道javascript笔试题你都会么
1.考察this var length = 10; function fn() { console.log(this.length); } var obj = { length: 5, metho ...
在这个变化的年代，IT人的方向在哪里？看两个故事
王超是我的朋友,来京四年整.最初在一家民企做LINUX运维工程师,月薪5000.工作很认真,埋头苦干型,每天工作时间很长,让加班从来无怨言.即使是周末休假,只要有工作任务也是随叫随到.然而当他提涨薪时 ...
Windows Azure Virtual Machine (33) Azure虚拟机删除重建
<Windows Azure Platform 系列文章目录> 注意:本文介绍的重建Azure虚拟机,必须在同一个订阅内删除重建,必须在同一个订阅内删除重建,必须在同一个订阅内删除重建. ...
大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)
一.拉近我们的距离我想,很多人会问,如今IE6还占据颇多份额的中国,html5.css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图: ...
关于WCF服务在高并发情况下报目标积极拒绝的异常处理
最近弄了个wcf的监控服务,偶尔监控到目标服务会报一个目标积极拒绝的错误.一开始以为服务停止了,上服务器检查目标服务好好的活着.于是开始查原因. 一般来说目标积极拒绝(TCP 10061)的异常主要是 ...
canvas画简单电路图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
MVC之前的那点事儿系列
MVC之前的那点事儿系列,是笔者在2012年初阅读MVC3源码的时候整理的,主要讲述的是从HTTP请求道进入MVCHandler之前的内容,包括了原创,翻译,转载,整理等各类型文章,当然也参考了博客园 ...

javascript之DOM

javascript之DOM的更多相关文章

随机推荐

热门专题