6.25心得

nodeList
NodeList 对象代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。
节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。
注释：在一个节点列表中，节点被返回的顺序与它们在 XML 被规定的顺序相同。
IE: Internet Explorer, F: Firefox, O: Opera, W3C: 万维网联盟 (因特网标准)
属性
length 可返回节点列表中的节点数目。
方法
item() 可返回节点列表中处于指定的索引号的节点。
代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<li>你若安好</li>
<li>便是晴天</li>
<li>后会无期</li>
</body>
<script>
var arr = [];
var list = ‘‘;
document.getElementsByTagName(‘li‘);
for(var i = 0;i<list.length;i++){
var li = list[i];
arr.push(li);
}
</script>
</html>

parentNode
parentNode 属性以 Node 对象的形式返回指定节点的父节点。
如果指定节点没有父节点，则返回 null。
语法
node.parentNode
返回值： Node 对象，节点的父节点。
DOM 版本 Core Level 1 Node Object
代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>列表示例：</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">父节点</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction(){
var x=document.getElementById("demo");
var y=document.getElementsByTagName("LI")[0];
x.innerHTML=y.parentNode.nodeName;
}
</script>
</body>
</html>

firstChild
firstChild 属性返回指定节点的首个子节点，以 Node 对象。
注释：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。
语法
node.firstChild
返回值： Node 对象，节点的子节点。
DOM 版本 Core Level 1 Node Object
代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p id="demo">子节点</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction(){
var x=document.getElementById("demo");
x.innerHTML=document.firstChild.nodeName;
}
</script>
</body>
</html>

lastChild
lastChild 属性返回指定节点的最后一个子节点，以 Node 对象。
语法
node.lastChild
返回值： Node 对象，节点的最后一个子节点。
DOM 版本 Core Level 1 Node Object
代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>列表示例：</p>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">最后一个子节点。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction(){
var l=document.getElementById("myList");
var x=document.getElementById("demo");
x.innerHTML=l.lastChild.nodeName;
}
</script>
<p><b>注释：</b>元素中的空白被视作文本，而文本被视作文本节点。</p>
<p>请尝试在 UL 关闭标签之前添加空格，结果将是节点 name=#text。</p>
</body>
</html>

previousSibling
previousSibling 属性返回同一树层级中指定节点的前一个节点。
被返回的节点以 Node 对象的形式返回。
注释：如果没有 previousSibling 节点，则返回值是 null。
语法
node.previousSibling
返回值： Node 对象，节点的前一个同胞节点。
DOM 版本 Core Level 1 Node Object
代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>列表示例：</p>
<ul id="myList">
<li id="item1">Coffee</li>
<li id="item2">Tea</li>
</ul>
<p id="demo">第二个列表项的前一个同胞的 id。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction(){
var itm=document.getElementById("item2");
var x=document.getElementById("demo");
x.innerHTML=itm.previousSibling.id;
}
</script>
<p><b>注释：</b>元素内的空白字符被视作文本，而文本被视作节点。</p>
<p>请在两个 <li> 元素之间添加空格，结果将是 "undefined"。</p>
</body>
</html>

previousElementSibling
previousSibling属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
previousElementSibling属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）；
previousElementSibling属性为只读属性。

previousElementSibling属性的语法、参数、及返回值
语法 element.previousElementSibling
返回值 节点对象，指定元素的前一个兄弟元素，如果没有兄弟元素，返回NULL
DOM 版本 DOM 3
代码
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<p>列表:</p>
<ul>
<li id="item1">咖啡 (第一项)</li>
<li id="item2">葡萄(第二项)</li>
</ul>
<p>点击以下按钮，获取列表中第二个li元素节点之前的兄弟元素的内容</p>
<button onclick="myFc()">按钮</button>
<p id="demo"></p>
<script>
function myFc() {
var x = document.getElementById("item2").previousElementSibling.innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

appendChild
appendChild() 方法向节点添加最后一个子节点。
提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
参数
参数 类型 描述
node Node 对象。 必需的。您希望添加的节点对象。
返回值
类型 描述
Node 对象 被添加的节点。
代码
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<ul id="myList1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="myList2">
<li>Water</li>
<li>Milk</li>
</ul>
<p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>
<button onclick="myFunction()">亲自试一试</button>
<script>
function myFunction(){
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}
</script>

</body>
</html>

insertBefore
appendChild()方法，是在父级节点中的子节点的末尾添加新的节点
insertBefore()方法，是在已有的节点前添加新的节点
代码
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class = ‘btn‘>
<input type = ‘button‘ value = ‘插入元素‘ id = ‘beebtn‘>
</div>
<div id = ‘box‘>
<p class = ‘pie1‘>U</p>
<p class = ‘pie2‘>V</p>
<p class = ‘pie3‘>W</p>
</div>
</body>
<script>
var btn = document.getElementById(‘beebtn‘);
btn.onclick = function(){
insertEle();
}
function insertEle(){
var oTest = document.getElement(box);
var newNode = document.createElement(‘div‘);
newNode.innerHTML = ‘This is a newpie‘;
oTest.insertBefore(newNode,null);
}
</script>
</html>

时间： 2024-12-14 23:43:56

6.25心得的相关文章

比赛--可乐商店问题--解题报告

可乐商店问题 题目大意: Once upon a time, there is a special coco-cola store. If you return three empty bottles to the shop,you’ll get a full bottle of coco-cola to drink. If you have n empty bottles right in your hand, how manyfull bottles of coco-cola can you

python学习心得2019/9/25

python的介绍:Python是一种跨平台的计算机程序设计语言(高级开发语言同Java与Objective). 特点:面向对象动态类型,简洁.易读以及可扩展性. 学习目标:Python where we can, C++ where we must在操控硬件的场合使用C++,在快速开发时候使用 Python. 和其他语言对比:python->字节码->机器语言->0101,没有C/C++快,内存管理不用自己考虑了,不考虑过程,难度与所学过的语言相比,c/c++>Objective

python 爬虫抓取心得

quanwei9958 转自 python 爬虫抓取心得分享 urllib.quote('要编码的字符串') 如果你要在url请求里面放入中文,对相应的中文进行编码的话,可以用: urllib.quote('要编码的字符串') query = urllib.quote(singername) url = 'http://music.baidu.com/search?key='+query response = urllib.urlopen(url) text = response.read()

写给过去25年和未来10年的自己！

"死亡是哲学的开端!"忘了是在哪本书上看到这句话,当时给我的震撼很大,没想到时隔这么久,回想起来依旧让我很震撼,而且更加深刻. 我大概是在高二到高三的那个时间段,就一直在思考死亡,因为当时周边的环境让我很压抑,让我想到的是死亡.虽然很压抑,但同时也是我迈向人格独立的第一步,回想起来,并不觉得触目惊心,反而觉得有点平淡,也让我窃喜,因为如果没有那段岁月,可能我现在依旧还是一个傻到没心没肺的boy.可是也没有夸张到说我一夜成仙,立地成佛的地步.岁月依旧,我还是和大部分人相同,吃饭.睡觉.学

C# 枚举在项目中使用心得

阅读目录 基本介绍 使用注意 使用方法 扩展用法 本文主要是我在项目中对C#枚举的使用心得,如有不足的地方欢迎您指出. 一.基本介绍  枚举是由一组特定常量构成的一组数据结构,是值类型的一种特殊形式,当需要一个由指定常量集合组成的数据类型时,使用枚举类型.枚举声明可以显式地声明 byte.sbyte.short.ushort.int.uint.long 或 ulong 类型作为对应的基础类型.没有显式地声明基础类型的枚举声明意味着所对应的基础类型是 int. 在代码中使用枚举,可以将以前笨拙的代

Auto Layout 使用心得

此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考我的 Auto Layout 设置哦,下载到本地打开就可以了. 简介 Auto Layout 是苹果在 Xcode 5 (iOS 6) 中新引入的布局方式,旨在解决 3.5 寸和 4 寸屏幕的适配问题.屏幕适配工作在 iPhone 6 及 plus 发布以后变得更加重要,而且以往的“笨办法”的工作量大幅增加,所以很多人开始学习使用 Auto Layout 技术. 初体验 0.

C++用法的学习心得

c++这门课,在我刚进入大学的就已经开始接触了.因为自己的专业就是计算机科学,因此c++嘛,对于我来说还是比较重要的.不同于其他专业,一开始我接触就是c++了,跳过了c语言一类的课.就我自己认为,c++这课学起来还是很有难度的.大一上课的时候,老师就说过这课在生活中的应用很广泛.处于初学者的我,开始给我的感觉就是很是乏味枯燥,提不起兴趣.不过仔细想想自己的专业就是和它有关,就算将来自己不从事这个行业,还是很有学习它的必要.因为多一门技术总归是不会吃亏的. 作为男生嘛,自己没有少玩游戏.很多人玩游

2015.1.21学习笔记和心得！

2015.1.21 随笔: 指令:cp -v 显示复制过程 sort 按次序显示文件 whereis 查找命令 ln -s src dest 连接文件 dest -> src /etc/apt/sources.list //存放镜像的地址 /var/lib/lists/* // 存放索引文件的地址 /var/cache/apt/archives //下载的软件包缓存的地址 编写shell脚本:三步走 1.创建shell脚本,vim shell.sh 2.修改权限,增加执行权限 chmod 777

BaseAdapter中重写getview的心得以及发现convertView回收的机制

转载自:http://blog.csdn.net/pkxiuluo01/article/details/7380974 以前一直在用BaseAdapter,对于其中的getview方法的重写一直不太清楚.今天终于得以有空来探究它的详细机制. 下面先讲讲我遇到的几个问题: 一.View getview(int position, View convertview, ViewGroup parent )中的第二个参数是什么含义: 二.View的SetTag和getTag方法的用途: 先来解决第一个问