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

随机推荐

PHP的学习--可变函数
PHP 支持可变函数的概念.这意味着如果一个变量名后有圆括号,PHP 将寻找与变量的值同名的函数,并且尝试执行它.可变函数可以用来实现包括回调函数,函数表在内的一些用途. 可变函数不能用于例如 ech ...
[Node.js] 使用TypeScript编写Node项目
原文地址:http://www.moye.me/2015/04/25/using_typescript/ 入 TypeScript 坑有一段时间了,由衷的看好,所以决定在自留地絮叨一番. 是什么 Ty ...
Hadoop阅读笔记（七）——代理模式
关于Hadoop已经小记了六篇,<Hadoop实战>也已经翻完7章.仔细想想,这么好的一个框架,不能只是流于应用层面,跑跑数据排序.单表链接等,想得其精髓,还需深入内部. 按照<Ha ...
iOS_UIImage_jpg<-->png转换
// png 图片转化是无损的. 可以有透明效果. // jpg 图片转化是有损的. 质量因子. - (void)jpgToPng { UIImage * image = [UIImage image ...
Dagger2 生成代码学习
接上一篇文章介绍了Dagger2的初步使用,相信刚接触的人会觉得很奇怪,怎么会有很多自己没有定义的代码出现,为什么Component的创建方式是那样的.为了搞清楚这些东西,我们需要查看一下Dagger ...
Visual Studio 2010 起始页中不显示最近使用的项目问题，解决办法
最近新装了vs2010,发现打开vs2010 后起始页面中的最近使用的栏目中并未显示最近加载的项目解决办法如下: 运行 regedit 打开下面的键值: HKEY_CURRENT_USER/So ...
IIS 服务器下载apk文件报404错
文件路径什么都对,可就是提示404错误,最后问题出在了IIS的MIME上,按照下面的办法即可解决. 1.在 IIS 管理器中,右键单击要为其添加 MIME 类型的网站或网站目录,单击"属性& ...
在Springmvc中获取properties属性
一些关键的属性一般都会拿出来作为配置,比如数据库连接等.在springmvc中也提供了获取property的类,比如@Value来获取.我接触spring很浅,基本上都是百度的问题解决方法,百度到@v ...
25套用于 Web UI 设计的免费 PSD 网页元素模板
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...
LeetCode - Populating Next Right Pointers in Each Node II
题目: Follow up for problem "Populating Next Right Pointers in Each Node". What if the given ...

javascript之DOM

javascript之DOM的更多相关文章

随机推荐

热门专题