JS-节点属性(常用!)

(开始很生疏,不想看的知识点,后来DOM中用的特别多,才发现很重要。还有几个点,是比较容易忽略的,值得注意!)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS-节点属性</title>
</head>
<body>
<h1>节点属性</h1>
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :<br/>

1. nodeName : 节点的名称<br/>

2. nodeValue :节点的值<br/>

3. nodeType :节点的类型<br/>

一、nodeName 属性: 节点的名称,是只读的。<br/>

1. 元素节点的 nodeName 与标签名相同<br/>
2. 属性节点的 nodeName 是属性的名称<br/>
3. 文本节点的 nodeName 永远是 #text<br/>
4. 文档节点的 nodeName 永远是 #document<br/>

二、nodeValue 属性:节点的值<br/>

1. 元素节点的 nodeValue 是 undefined 或 null<br/>
2. 文本节点的 nodeValue 是文本自身<br/>
3. 属性节点的 nodeValue 是属性的值<br/>

三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:<br/>

元素类型 节点类型<br/>
!元素 1<br/>
属性 2<br/>
!文本 3&nbsp;空格也是返回3<br/>
注释 8<br/>
文档 9<br/>
<h1>注意空格!!!!</h1>
<hr color="red" />
<h1>实验</h1>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var m = document.getElementsByTagName("li");
for(var i=0;i<m.length;i++){
// document.write(m[i].nodeType);
switch(m[i].nodeType){
case 1:
document.write("1:li节点的类型—【元素】—<br/>");
break;
case 2:
document.write("1:li节点的类型—【属性】—<br/>");
break;
case 3:
document.write("1:li节点的类型—【文本】—<br/>");
break;
case 8:
document.write("1:li节点的类型—【注释】—<br/>");
break;
case 9:
document.write("1:li节点的类型—【文档】—<br/>");
break;
}

document.write("2:li里边的文本内容——"+m[i].nodeValue+"<br/>");
document.write("3:li节点的名称——"+m[i].nodeName+"<br/>");
document.write("<hr/>");
}

</script>
</body>
</html>

时间: 2025-01-03 08:50:05

JS-节点属性(常用!)的相关文章

Js节点属性与方法

属性: Attributes     存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType     返回此节点的数据类型 Definition     以DTD或XML模式给出的节点的定义(只读) Doctype     指定文档类型节点(只读) documentElement     返回文档的根元素(可读写) firstChild     返回当前节点的第一个子节点(只读) Implementation     返回XMLDOMImplementa

js中对节点属性的操作和对节点的操作

常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribute(name):删除某个节点的属性. 例: window.onload = function(){        //查找body节点        var node_body = document.body;        //alert(node_body);        //查找img节点 

js教程系列33 :javascript-DOM节点属性

1 设置节点属性三个方法: 获取:getAttribute(名称) 设置:setAttribute(名称, 值) 删除:removeAttribute(名称) 举个例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = fun

原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

js盒子模型常用属性

概念:通过js的属性和方法获得元素的样式信息值  查看元素详细属性console.dir(); 操作元素盒子模型 1.client系列(当前元素的私有属性) 1)clientWidth/clientHeigth:内容的宽度(不包括内容溢出部分,固定设置的width和height)/高度+左右/上下padding值 2)clientTop/clientLeft:上/左边框的高度 2.offset系列 1)offsetHeight/offsetWidth:内容的高度/宽度+左右/上下padding+

js节点使用 碎片节点

js节点,都知道3大类: 元素节点 属性节点 文本节点 常用的呢元素节点,属性节点.还有俩方法,setAttribute()  getAttribute(),设置和获取属性值 在实际工作中呢,长长我们从后台拿到一串数据,要在前台页面展示.我们写好一个html母版后,用for循环,在母版中加入数据,最后插入页面.这个呢就是思路! 为了快捷方便,常常这么干, var str=""; for(var i=0;i<data.length;i++){ str+="<div&

JS中的常用的代码操作

本文件介绍常用的js代码的DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Console对象)操作说明. 一.DOM树的节点 DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图: //通过ID来查看元素属性 var li =

DOM(Document object madle) 文档对象模型: 元素节点 文本节点 属性节点

[DOM树节点] DOM 节点分为三大类:元素节点 文本节点 属性节点 文本节点 属性节点 为元素节点的两个子节点 通过getElement系列方法,可以去到元素节点. [查看节点] 1.document.getElementById:通过ID获取唯一的节点;多个同名ID,只会取第一个: 2.document.getElementsByName:通过name取到一个数组,包含1到多个节点: 使用方式:通过循环,取到每个节点.循环次数:从0开始,<数组.length   [查看和设置属性节点] 1

Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一.nodeName 属性: 节点的名称,是只读的. 1. 元素节点的 nodeName 与标签名相同 2. 属性节点的 nodeName 是属性的名称 3. 文本节点的 nodeName 永远是 #text 4. 文档节点的 nodeName 永远是 #document 二.nodeV

js与webview 常用交互代码

常用js交互 css常用参数::: 是否允许用户选择元素的内容,选择值包括:     auto:用户可以选择元素内的内容     none:用户不能选择任何内容     text:用户只能选择元素内的文本 常用JS语句::: 1. //禁用用户选择 [self.webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"]; 2.//禁用