首页 > 代码库 > 6.25心得

6.25心得

2024-10-12 01:17:02   215人阅读

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 = http://www.mamicode.com/‘插入元素‘ 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>

6.25心得


联系
我们