Javascript知识四（DOM）
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 ...
随机推荐
- Minimum Transport Cost(floyd+二维数组记录路径)
Minimum Transport Cost Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...
- 【玩转Ubuntu】01. Ubuntu上配置JDK
一.安装JDK 提示:这里我们使用jdk1.6,因为android开发要求使用1.6.如果不信你可以打开android studio,它会提示你选择JDK6的路径 下载地址: http://www.o ...
- 消除“Permission is only granted to system apps”错误
遇见这个问题我百度搜了一大堆说是须要clean项目,可是我每次clean项目的时候我的R文件总是丢失. 如今我给大家介绍一下避免授予系统权限报错更改方法 在AndroidManifest.xml中使用 ...
- Swift 设置navigation左右两侧按钮
我们以设置右侧按钮为例,左侧方法类似 方法一,直接自定义文字 let item=UIBarButtonItem(title: "分享", style: UIBarButtonIte ...
- 2014.12.06 ASP.NET 三级联动，添加员工，修改员工
(一)三级联动 要实现的效果: 代码: MyDBDataContext context = new MyDBDataContext(); protected void Page_Load(object ...
- (跨平台)cocos2d-x C++ or Object-C(前端)调用C# webservices(后台)，实现交叉编译到Android/IOS/WinPhone等移动终端设备
1.2014年4月2号算是正式找到自己的实习工作-杭州美迪软件有限公司(移动物联事业部)合作于:四川管家婆总部移动终端代理,由于在校选编程专业语言C#和在浙大网新培训课程(C#.Asp.net开发)缘 ...
- ARM和x86的区别
CPU的指令集从主流的体系结构上分为精简指令集(RISC)和复杂指令集(CISC).嵌入式系统中的主流处理器——ARM处理器,所使用的就是精简指 令集.而桌面领域的处理器大部分使用的是复杂指令集,比如 ...
- jquery实现点击改变背景色，点击其他恢复原来背景色，被点击的改变背景色
实现这个功能很简单,可是之前自己不怎么熟悉jquery,感觉各种乱写.现在终于整理好了思路. html: <div class="managementPanel"> & ...
- 方形图片转动并转换成圆形CSS特效
<style> img { transition:all 0.8s ease 0s;} img:hover { border-radius:50%; transform:rotate(72 ...
- 第4章 分治策略 monge阵列
/* fi表示第i行的最左最小元素的列小标,则有f0<f1<f2<...<fn-1 取数组的偶数行,组成新的子数组,递归求解最左最小元素的列下表,利用偶数项限定奇数项的范围,再 ...