1.dom之对象分类

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>对象分类</title>

 </head>

 <body>

     <div id="div1">

         <div ></div>

         <p></p>

     </div>

  <script type="text/javascript">

         /*在DOM(文档对象模型中，也是一切都是对象，但是范围很小，就只有几个

             1.document object

             2.element object

             3.text object

             4.attribute object

             5.comment object

             5个对象封装到一个Node object中。node object有

             自己的节点属性：

                 attribute；nodeType;nodeName;nodeValue;innerHTML;

                     导航属性：

                         parentNode

                         firstChild

                         lastChild

                         childNodes

                         由于上面的5个属性都是封装到一个Node Object中，所以我们可以直接使用这些属性。/

         */

         var ele=document.getElementById("div1");

                     //自身属性

         console.log(ele.nodeName);

         console.log(ele.nodeType);

         console.log(ele.nodeValue);

                     //导航属性之firstChild

         var ele2=ele.firstChild;

         alert(ele2.nodeName);//#text 结果令人惊讶，原来2个div之间有一些空格，这些就是造成是文本的原因

         var ele3=ele.childNodes;

         alert(ele3.length);//5，js把空白区域当成了文本

         var parent=ele.parentNode;

         alert(parent);

     </script>

 </body>

 </html>

2.dom对象模型的根据文档树结构进行导航。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>对象分类</title>

 </head>

 <body>

     <div id="div1">

         <div ></div>

         <p></p>

     </div>

  <script type="text/javascript">

         /*在DOM(文档对象模型中，也是一切都是对象，但是范围很小，就只有几个

             1.document object

             2.element object

             3.text object

             4.attribute object

             5.comment object

             5个对象封装到一个Node object中。node object有

             自己的节点属性：

                 attribute；nodeType;nodeName;nodeValue;innerHTML;

                     导航属性：

                         parentNode

                         firstChild

                         lastChild

                         childNodes

                         由于上面的5个属性都是封装到一个Node Object中，所以我们可以直接使用这些属性。/

         */

         var ele=document.getElementById("div1");

           /*          //自身属性

         console.log(ele.nodeName);

         console.log(ele.nodeType);

         console.log(ele.nodeValue);

                     //导航属性之firstChild

         var ele2=ele.firstChild;

         alert(ele2.nodeName);//#text 结果令人惊讶，原来2个div之间有一些空格，这些就是造成是文本的原因

         var ele3=ele.childNodes;

         alert(ele3.length);//5，js把空白区域当成了文本

         var parent=ele.parentNode;

         alert(parent);*/

                     //既然firstChild不行，但是firstElementChild可以

         var ele_son=ele.firstElementChild;

         alert(ele_son.nodeName);

                     //lastElementChild

         var last=ele.lastElementChild;

         alert(last.nodeName);

                     //所有节点children

         var ele_nodes=ele.children;

         alert(ele_nodes.length);

         alert(ele_nodes[0].nodeName);

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

                 console.log(ele_nodes[i].nodeName);

         }

                    //nextElementSibling,兄弟元素节点，记住没有空白文档

         var sib=ele.firstElementChild;

         console.log(sib.nextElementSibling.nodeName);

     </script>

 </body>

 </html>

3.全局查找和局部查找

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>查找</title>

 </head>

 <body>

     <div id="div1">hello

         <div class="div2">hello2</div>

         <div class="div3" name="lizebo">hello3

                 <p>hello inner</p>

                 <p id="p1">world innerhtml</p>

         </div>

         <p>hello,browser</p>

     </div>

     <script type="text/javascript">

                     //这里注意一下啊，这里为什么是elements,而不是element。这是有意义的，因为

                     //设计者知道以class命名元素可能有多个，而id只能有一个。

                   //1.通过id 选择器:document.getElementById();

                   //2.通过class选择器

        var ele=document.getElementsByClassName("div2");

        console.log(ele[0].nodeName);

        console.log(ele[0].innerHTML);

                     //3通过tag

        var tagnames=document.getElementsByTagName("p");

        console.log(tagnames);

        console.log(tagnames[0].innerHTML);

                     //4.通过名字,虽然用的不多，但是可以用这个

        var names=document.getElementsByName("lizebo");

        console.log(names[0].nodeName);

        /*局部去找也就是不通过document找，那么只有用element了,都差不多，这个怎么方便怎么用。*/

                     var els=document.getElementsByClassName("div3")[0];

                     var jubu=els.getElementsByTagName("p");

                     console.log(jubu[0].innerHTML);

     </script>

 </body>

 </html>

Dom模型的更多相关文章

  1. DOM模型有三种

    <!-- DOM模型有三种: DOM level 1:将HTML文档封装成对象. DOM level 2:在level 1基础加入新功能,比如解析名称空间. //<html xmlns=& ...

  2. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  3. JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

    利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...

  4. JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解

    这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...

  5. Fireworks Extension —— 开发篇（Dom模型）

    如上一篇博文所叙述的,一个很偶然的机会,我得知可以使用Javascript开发Fireworks插件,又注意到了视觉小伙伴的需求,于是便上手开发Fireworks Extension了. 很幸运的,在 ...

  6. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  7. 总结一下自己脑海里的JavaScript吧（一）--DOM模型

    今天是2019年6月25日,闲来无事,写一篇文章来看看自己脑袋里装了多少JavaScript知识! 这儿就第一章: 说起JavaScript,它是什么?后端脚本语言?前端编程语言?还是在网站浏览器上运 ...

  8. 肆、js的DOM模型

    一.网页中的dom模型框架 1.dom中的3中节点:元素节点.文本节点.属性节点 a.元素节点:html中的各种标签就是各个元素节点,元素节点可以包含其他元素,只有html根节点例外. b.文本节点: ...

  9. 浏览器内核之 HTML 解释器和 DOM 模型

    微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决你的问题. 前言 此文章是我最近在看的[WebKit 技术内幕]一书的一些理解和做的笔记.而[WebKit 技术内幕]是基 ...

  10. JavaScript的事件、DOM模型、事件流模型以及内置对象详解（三）

    JS中的事件 JS中的事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize ...

随机推荐

  1. IT 圈里有哪些经常被读错的词？

    原文链接:IT 圈里有哪些经常被读错的词? ()标相应英文单词[]标音标 =====公司/产品名===== Youtube (You-tube [tju:b]) 念 优tiu啵 不念 优吐毙Skype ...

  2. C#设计模式之九装饰模式（Decorator）【结构型】

    一.引言 今天我们要讲[结构型]设计模式的第三个模式,该模式是[装饰模式].我第一次看到这个名称想到的是另外一个词语“装修”,我就说说我对“装修”的理解吧,大家一定要看清楚,是“装修”,不是“装饰”. ...

  3. js自调用函数的实现方式

    我们知道,js中定义自调用函数通常使用下列方式: (function () { alert("函数2"); })(); 事实上,使用括号包裹定义函数体,解析器将会以函数表达式的方式 ...

  4. Fastify 系列教程二 (中间件、钩子函数和装饰器)

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) 中间件 Fastify 提供了与 Express 和 Restify ...

  5. Java反射机制(Reflect)解析

    一.导读 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力.这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被程序语言的设计 ...

  6. 详解Java中的clone方法

    详解Java中的clone方法 参考:http://blog.csdn.net/zhangjg_blog/article/details/18369201/ 所谓的复制对象,首先要分配一个和源对象同样 ...

  7. Linux上安装二进制文件MySQL详解

    前言:昨天晚上搞了很久,终于搞清楚mysql的安装配置了,我真是太low了.当我在云服务器上登进Mysql时,真是高兴哈哈,咱一步一步来,彻底搞懂Mysql的安装配置. 我的安装环境: 阿里云服务器 ...

  8. idea配置jetty服务器，通过mvn实现

    今天想试试除了tomcat之外的另一个服务器jetty的使用: 关于项目在tomcat中的启动大概有多种,尤其是在本地环境下,ide关于tomcat的优化做的很好,但是在idea上面部署tomcat总 ...

  9. Java基础——数据类型

    Java中与C++的区别: 1.Java中没有无符号类型. 2.整型值和布尔值之间不能进行相互转换. 3.Java中不区分变量的定义和声明. 如:在C++中int i = 10;是一个定义,而exte ...

  10. 《Spark Python API 官方文档中文版》 之 pyspark.sql (一)

    摘要:在Spark开发中,由于需要用Python实现,发现API与Scala的略有不同,而Python API的中文资料相对很少.每次去查英文版API的说明相对比较慢,还是中文版比较容易get到所需, ...