Javascript知识四（DOM）

【箴 10:4】手懒的，要受贫穷；手勤的，却要富足。 He becometh poor that dealeth with a slack hand: but the hand of the diligent maketh rich.

O(∩_∩)O~~ 昨天总结了《Javascript知识三》后忘记发布了，呵呵，最近我的忘性很大啊O(∩_∩)O~~，今天是练习，所以把这周还未总结的写下来，和大家一起分享交流。

首先，还是先把function剩下的总结下；

函数的自定义：

例如这道题，是定义一个数组，数组里的属性可以直接赋值，这里的SayHi作为数组的属性来用

<script>

    var p = {

        name: "Apphia",

        age: 20,

        gender: true,

     SayHi: function () 

         {

            //alert(this);//打印出[object Object]

                  return this.name;//这里的this指的是当前数组中的name 

              }

    };

    alert(p.SayHi());    //打印出名字Apphia

    </script>

DOM(Document Object Model)

DOM中的“D”：文档，如果没有document（文档），Dom就无从谈起。Dom把编写的网页文档转换为一个文档对象

DOM中的"O"：对像，“对象”是一种自足的数据集合，js中的对象可以分为三种：用户定义对象（自行创建的），内建对象（内建在js语言里的对象，如Array,Date等），宿主对象（由浏览器提供的）

DOM中的“M”：模型，含义是某种事物的表现形式。

节点：网络中的一个连接点。一个HTML文档就是一个节点树。在DOM操作中有许多不同类型的HTML标签组成一个个的节点，每一个节点又是一个对象

节点分为三种：

元素节点：HTML标签
文本节点：元素节点里包含的文本
属性节点：HTML标签里定义的属性

获取元素：

根据标签获取： getElementByTagName() 返回数组

<div><span>歌手</span> 囚鸟 <span>歌名</span></div>

    <script>

        var div = document.getElementsByTagName("div"); //根据标签名获取

        alert(div.length);         //获取长度，这里显示4

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

            alert(div1[i].innerHTML);    //打印出 <span>歌手</span> 囚鸟 <span>歌名</span>

        }

       </script>

根据name属性获取：getElementsName () 返回数组

<body>

   <div name="div1">水果</div>

     <div name="div1">APPLE</div>

    <script>

        var div2 = document.getElementsByName("div1");//根据name属性来获取

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

            alert(div2[i].innerHTML);

        }

       // ————————————打印出水果、APPLE

    </script>

</body>

根据calss属性获取： getElementsByClassName() 返回数组

    <div class="div2">鲜花</div>

    <script>

        var div = document.getElementsByClassName("div2"); //根据class属性来获取

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

            alert(div[i].innerHTML);

        }

        //————————————打印出鲜花

    </script>

根据元素ID属性获取：getElementById() 返回的是单个值

<div id="div">Wellcome to xxx</div>

    <script>

        var divadd = document.getElementById("div")

        alert(divadd.innerHTML);    //打印出Wellcome to xx

    </script>

根据选择器获取querySelector() 返回数组

<div>柳树</div>

    <script>

        var div = document.querySelector(".div");       //根据选择器来获取

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

            alert(div[i].innerHTML);

        }

    </script>

注：获取文本节点：先抓取元素在去找到文本节点

innerHTML:获取HTML和文本 innerText: 获取纯文本（但只在IE浏览器下使用）

获取属性节点：先抓取元素在去抓取属性 getAttribute（）

 <div id="div" class="divclass" name="divname">

    <script>

        var div = document.getElementById("div");  //先获取元素节点

        var divAttibute = div.getAttribute("name");

        alert(divAttibute);

    </script>

修改属性节点：setAttribute()

 <div id="div" class="divclass" name="divname">

       <script>

           var div = document.getElementById("div");//先获取元素节点

           div.setAttribute("name", "MYDIV");     

           var divAttibute = div.getAttribute("name");

           alert(divAttibute);

       </script>

查看子节点长度,节点类型，节点名称，节点文本内容

<div id="outdiv">外层的DIV

        <div id="centerdiv">中层的DIV

            <div id="innerdiv">内层DIV</div>

        </div>

        最后一个空白节点

    </div>

 <script>

        var divlengh = div.childNodes.length;       //查看子节点长度

        var divchild = div.childNodes;

        alert(divlengh);

        //查看子节点类型

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

            alert(divchild[i].nodeType);//打印出 3 1 3（3：文本节点  1：元素节点）

        }

        //查看子节点名称

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

            alert(divchild[i].nodeName);

        }

        //查看节点文本内容(只显示文本信息，非文本显示NULL)

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

            alert(divchild[i].nodeValue);

        }

    </script>

注：还有常用的 firstchild（第一个字节点）和 lastchild（最后一个字节点）两个属性

动态创建节点：

innerHTML(创建文本元素)

<div id="textdiv"></div>

    <script>

        document.getElementById("textdiv").innerHTML = "动态添加";  //打印出 动态添加

</script>

wirte

<div id="div"></div>

    <script>

        var divadd = document.getElementById("div");

       // write

        document.write("<p>HELLO</P>");  //动态产生p标签

        function inserp() //或封装成方法

        {

            var str = "<p>";

            var text = "萨瓦迪卡";

            var str1 = "</p>";

            return str + text + str1;

        }

        document.write(inserp());  //write通常用于大规模处理

    </script>

createElement（创建元素节点） createTextNode（创建文本节点） appendChild（追加子节点）

 <div id="outdiv">外层的DIV

        <div id="centerdiv">中层的DIV

            <div id="innerdiv">内层DIV</div>

        </div>

        最后一个空白节点

    </div>

  <script>

        var div = document.getElementById("outdiv");//先获取父节点

        //追加节点

        var p = document.createElement("p"); //1  首先创建元素节点

        var text = document.createTextNode("。。。。。。。。。。。。。。。");  //创建一个文本节点

        p.appendChild(text);//文本节点追加到父节点

        div.appendChild(p);//将元素节点p追加到父节点div中

        var adddiv = document.getElementById("div").appendChild("div"); //使用

        </script>

O(∩_∩)O~~因为要赶车，所以今天只能先写到这了，剩下的内容下次在继续总结！加油！~~

Javascript知识四（DOM）的更多相关文章

javascript (十四) dom
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object M ...
【原文】前端程序员必须知道的高性能Javascript知识
原文:前端程序员必须知道的高性能Javascript知识想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...
《jQuery风暴》第2章必须知道的JavaScript知识
第2章必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部 ...
Javascript知识——事件
O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...
javascript系列之DOM(一)
原文:javascript系列之DOM(一) DOM(document object moudle),文档对象模型.它是一个中立于语言的应用程序接口(API),允许程序访问并修改文档的结构,内容和样式 ...
JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
WEBBASE篇：第十一篇， JavaScript知识6
JavaScript 知识6 一, String 对象 1,分隔字符串, 函数: split(seperator) 作用: 将字符串,通过seperator 拆分成一个数组: eg: var msg= ...
WEBBASE篇：第十篇， JavaScript知识5
JavaScript知识5 <!doctype html> <html lang="en"> <head> <meta charset=& ...
模板：DOM常用场景【表单提交】——javascript结合HTML DOM（或者JQuery）运用
一.删除行为前的提示首先要有一个onclick的DOM(点击)事件,和一个JavaScript弹出框:confirm()确认框 <script> function del(){ var ...

随机推荐

我使用过的Linux命令之date - 显示、修改系统日期时间
原文地址:http://www.cnblogs.com/diyunpeng/archive/2011/11/20/2256538.html 用途说明 ate命令可以用来显示和修改系统日期时间,注意不是 ...
C#反射的应用【转】
摘要: 对于反射贫道也是很陌生的,所以趁现在有时间就把反射看了一下,记下笔记!!! 初始听说反射是可以动态的调用程序集,并从中来获取相应的方法和属性,感觉比较神奇,,, 反射的定义:反射(Reflec ...
利用js_API 运行对html文档元素的属性的CRUD操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
sql中int字段实现百分比
首先: 用col*1.00 把int字段隐式转换成decimal类型. 然后: 用 round(col,2)来截取前两个小数前的数据最后: 用 CONVERT(FLOAT,decimalNum)来转 ...
蓝桥杯算法训练<一>
一.图形显示此题虽然简单,但是需啊哟注意的是,每个“*”后边有一个空格] 问题描述编写一个程序,首先输入一个整数,例如5,然后在屏幕上显示如下的图形(5表示行数): * * * * * * * * ...
linux循环递归设置权限
这里给出一个循环递归得到对文件夹和文件分别有效的设置方法: find /path -type f -exec chmod 644 {} \; #对目录和子目录里的文件 find /path -type ...
c++中basic_istream::getline()的返回值何时为真
今天在看primer,17ch中的IO库再探,做课后练习,要求用ifstream.getline(char*, const unsigned, char)读取一个文件,用循环: while(ifs.g ...
Matlab工程
1.matlab设置默认路径在原来的默认路径(bin)下创建一个名为startup.m的文件,内容为相对路径 cd ..\..\WorkSpace\ 或绝对路径 cd F:\Program\MATL ...
WTL CEdit关联绑定ID，滚动到最新的一行
绑定控件 HWND logEdit = ::GetDlgItem(this->m_hWnd, IDC_EDIT_LOG); m_outputlogEdit.Attach(logEdit); 滚动 ...
图片压缩上传 Android
图片压缩的话想保持图像清晰度,但是又想保持图片的大小在100k左右. 同时的话又不想自己写那些压缩的代码的话.那你就找对地方了. 提供一个思路. 先读取你的文件,然后读到bitmap里面进行尺寸裁 ...

Javascript知识四（DOM）

Javascript知识四（DOM）的更多相关文章

随机推荐

热门专题