JS 之Node节点的属性、方法获取

JS Node节点的常见属性和方法使用 & 如何获取相应节点和值

一、节点的常用属性和方法

（一）通过具体的元素节点调用如下方法和属性

《1》getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点

《2》appendChild(oNode)
方法给标签对象添加子节点。oNode是要添加的子节点。

《3》removeChild(oNode)
removeChild方法删除子节点。oNode是要删除的孩子节点

《4》cloneNode( [bCloneChildren])
cloneNode方法克隆一个对象。

《5》bCloneChildren表示是否需要克隆孩子节点

《6》getAttribute(sAttributeName)

getAttribute方法获取属性值。sAttributeName是要获取的属性名

（二）属性：

childNodes
属性，获取当前节点的所有子节点firstChild
属性，获取当前节点的第一个子节点lastChild
属性，获取当前节点的最后一个子节点parentNode
属性，获取当前节点的父节点nextSibling
属性，获取当前节点的下一个节点previousSibling
属性，获取当前节点的上一个节点className
用于获取或设置标签的class属性值innerHTML
属性，表示获取/设置起始标签和结束标签中的内容

eg: Node常用属性和方法如下测试

    <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>
<script type="text/javascript">//页面加载完成
window.onload = function() {var divObj = document.getElementsByTagName("div")[0];
// 通过具体的元素节点调用
// getElementsByTagName()
// 方法，获取当前节点的指定标签名孩子节点var spanObjs = divObj.getElementsByTagName("span");
// alert(spanObjs[0]);  弹 object HTMLSpanElement
//  alert(spanObjs.length); 弹出3var h3Obj = document.createElement("h3")// <h3></h3>//  alert(h3Obj);
h3Obj.innerHTML = "我是h3标签"; // <h3>我是h3标签</h3>// appendChild(oNode)
// 方法给标签对象添加子节点。oNode是要添加的子节点。
divObj.appendChild(h3Obj); // 把我创建的h3标签添加到div中// removeChild(oNode)
// removeChild方法删除子节点。oNode是要删除的孩子节点
var span02Obj = document.getElementById("span02");
divObj.removeChild(span02Obj);// getAttribute(sAttributeName)
// getAttribute方法获取属性值。sAttributeName是要获取的属性名
alert( span02Obj.getAttribute("id") );// cloneNode( [bCloneChildren])
// cloneNode方法克隆一个对象。bCloneChildren表示是否需要克隆孩子节点
var h2Obj = document.getElementsByTagName("h2")[0];
//  alert(h2Obj.innerHTML);
var h2CloneObj = h2Obj.cloneNode(true); // <h2></h2>//  alert(h2CloneObj.innerHTML);
divObj.appendChild(h2CloneObj);}
</script></head><body><div>   <h1>111</h1><span >span1</span><span id="span02" >span2</span><span>span3</span><h2><a href="1">111</a></h2></div>
</body>
</html>

二、DOM对象节点查询获取对应节点和值测试

（1）如下html中引入了CSS限制相应的div格式

CSS:此处练习CSS如何脱离html创建

@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;
}button {width: 300px;margin-bottom: 10px;
}#btnList {float:left;
}#total{width: 450px;float:left;
}ul{list-style-type: none;margin: 0px;padding: 0px;
}.inner li{border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float:left;
}.inner{width:400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;
}

（2）上面创建的css引入到如下的html中

<link rel="stylesheet" type="text/css" href="style/css.css" />

效果如下：

<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">
window.onload = function(){//1.查找#bj节点document.getElementById("btn01").onclick=function(){//查找id为bj的标签对象var liObj = document.getElementById("bj");          alert(liObj.innerHTML);}//2.查找所有li节点var btn02Ele = document.getElementById("btn02");btn02Ele.onclick = function(){var liObjs = document.getElementsByTagName("li");for(var i=0;i<liObjs.length;i++){alert(liObjs[i].innerHTML);}alert(liObjs.length);};//3.查找name=gender的所有节点var btn03Ele = document.getElementById("btn03");btn03Ele.onclick = function(){alert( document.getElementsByName("gender").length );};//4.查找#city下所有li节点var btn04Ele = document.getElementById("btn04");btn04Ele.onclick = function(){//1.先通过id属性查找id属性值为city的节点var cityObj = document.getElementById("city");//2.通过city节点对象.getElementsByTagName方法查找它的孩子节点alert( cityObj.getElementsByTagName("li").length );};//5.返回#city的所有子节点var btn05Ele = document.getElementById("btn05");btn05Ele.onclick = function(){//1.先通过id属性查找id属性值为city的节点var cityObj = document.getElementById("city");//2.通过city节点.childNodes获取所有的孩子节点alert( cityObj.childNodes.length );};//6.返回#phone的第一个子节点var btn06Ele = document.getElementById("btn06");btn06Ele.onclick = function(){//1.先获取id为phone的节点var phoneObj = document.getElementById("phone");//2.通过phone节点对象.firstChild获取第一个孩子节点alert( phoneObj.firstChild.innerHTML );};//7.返回#bj的父节点var btn07Ele = document.getElementById("btn07");btn07Ele.onclick = function(){alert( document.getElementById("bj").parentNode.innerHTML );};//8.返回#android的前一个兄弟节点var btn08Ele = document.getElementById("btn08");btn08Ele.onclick = function(){alert( document.getElementById("android").previousSibling.innerHTML );};//9.读取#username的value属性值var btn09Ele = document.getElementById("btn09");btn09Ele.onclick = function(){//1.先获取标签对象var usernameObj = document.getElementById("username");//2.通过标签对象.value属性值获取文本内容alert( usernameObj.value );};//10.设置#username的value属性值var btn10Ele = document.getElementById("btn10");btn10Ele.onclick = function(){//1.先获取标签对象var usernameObj = document.getElementById("username");//2.通过标签对象.value属性修改文本内容usernameObj.value = "hello world！";};//11.返回#bj的文本值var btn11Ele = document.getElementById("btn11");btn11Ele.onclick = function(){//1、先获取标签对象var liObj = document.getElementById("bj");//2.通过标签对象.innerHTML或innerText属性获取文本内容// alert(liObj.innerHTML); // 获取起始标签和结尾标签中所有的内容alert(liObj.innerText); // 获取起始标签和结尾标签中所有的文本 内容（全过滤掉标签）};
};</script>
</head>
<body>
<div id="total">
<div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj"><a href="#">北京</a></li><li>北京</li><li>上海</li><li>深证</li></ul><br><br><p>你喜欢的水果?</p><ul id="game"><li id="rl">苹果</li><li>香蕉</li><li>哈密瓜</li><li>草莓</li></ul><br /><br /><p>你喜欢的手机是?</p><ul id="phone"><li>小米</li><li id="android">苹果</li><li>华为</li></ul>
</div><div class="inner">gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="nice to meet you"/>
</div>
</div>
<div id="btnList"><div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

如上测试其中截图：

JS 之Node节点的属性、方法获取相关推荐

js代码设置节点的属性
js代码设置节点的属性 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
向js中添加静态方法与属性方法
前言略静态方法 if (!Date.diffDays) {Date.diffDays = function(s1, s2) {return Date.valueOf2(s1).diffDaysOf ...
k8s node节点 unknown解决方法
前言生产环境的Node节点挂了,功能受到了影响,进行快速的恢复__ 2022年07月记录环境 kubernetes Linux 操作 1.重启该节点 kubectl get nodes -o wi ...
JS中Node节点总结
Node的三个基本属性: 1.nodeType:表明节点类型,1是元素节点,3是文本节点. 2.nodeName: 表明节点名称,元素节点为标签名,文本节点为#text. 3.nodeValue:表 ...
DOM节点的属性及文本操作
DOM节点的属性操作获取属性值 DOM节点.属性名 //不能获取用户自定义的属性值 DOM节点.getAttribute(属性名) //获取所有属性值设置属性值 DOM节点.属性名 = 属性值 D ...
Dom基础特殊的节点获取元素节点的内容获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
JS window对象 Location对象 location用于获取或设置窗体的URL，并且可以用于解析URL。语法: location.[属性|方法]...
Location对象 location用于获取或设置窗体的URL,并且可以用于解析URL. 语法: location.[属性|方法] location对象属性图示: location 对象属性: lo ...
【Groovy】自定义 Xml 生成器 BuilderSupport ( nodeCompleted 方法获取节点闭合信息 )
文章目录一.nodeCompleted 方法获取节点闭合信息二.完整代码示例 1.MyBuilderSupport 生成器代码 2.使用 MyBuilderSupport 生成器创建 Xml 代码 ...
【Groovy】Xml 反序列化 ( 使用 XmlParser 解析 Xml 文件 | 获取 Xml 文件中的节点和属性 | 获取 Xml 文件中的节点属性 )
文章目录一.创建 XmlParser 解析器二.获取 Xml 文件中的节点三.获取 Xml 文件中的节点属性四.完整代码示例一.创建 XmlParser 解析器创建 XmlParser 解 ...

JS 之Node节点的属性、方法获取

JS Node节点的常见属性和方法使用 & 如何获取相应节点和值

一、节点的常用属性和方法

二、DOM对象节点查询获取对应节点和值测试

JS 之Node节点的属性、方法获取相关推荐

最新文章

热门文章

JS 之Node节点的 属性、方法 获取

JS Node节点的常见属性和方法使用 & 如何获取相应节点和值

一、节点的常用属性和方法

二、DOM对象节点查询 获取对应节点和值测试

JS 之Node节点的 属性、方法 获取相关推荐

最新文章

热门文章

JS 之Node节点的属性、方法获取

二、DOM对象节点查询获取对应节点和值测试

JS 之Node节点的属性、方法获取相关推荐