当前位置： 首页 > ai >正文

dom（getElementsByName()\getElementsByName()\getAttribute()\setAttribute()\节点属性)

ai 2025/7/4 18:05:31

1、dom

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。





var mychar = document.getElementById("con");  
mychar.style.color="red";
mychar.style.backgroundColor ="#ccc";
mychar.style.display="none";

2、getElementsByName()

返回带有指定名称的节点对象的集合。

document.getElementsByName(name)
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){var mynode=document.getElementsByName("myt")         ;  alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6"><br />
<input type="button" οnclick="getnum()" value="看看有几项？" />
</body>
</html>

3、getElementsByTagName()

Tagname是标签的名称，如p、a、img等标签名。可以和访问数组一样的方法来访问，所以从0开始。



4、getAttribute()

通过元素节点的属性名称获取属性的值。

elementNode.getAttribute(name)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>   
<p id="intro">课程列表</p>  <ul>  <li title="第1个li">HTML</li>  <li>CSS</li>  <li title="第3个li">JavaScript</li>  <li title="第4个li">Jquery</li>  <li>Html5</li>  </ul>  
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">var con=document.getElementsByTagName("li");for (var i=0; i< con.length;i++){var text=con[i].getAttribute("title");if(text!=null){document.write(text+"<br>");}} </script> 
</body>
</html>

5、setAttribute()

增加一个指定名称和值的新属性

elementNode.setAttribute(name,value)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body><p id="intro">我的课程</p>  <ul>  <li title="JS">JavaScript</li>  <li title="JQ">JQuery</li>  <li title="">HTML/CSS</li>  <li title="JAVA">JAVA</li>  <li title="">PHP</li>  </ul>  <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
<script type="text/javascript">var Lists=document.getElementsByTagName("li");for (var i=0; i<Lists.length;i++){var text=Lists[i].getAttribute("title");document.write(text +"<br>");if(text==""){Lists[i].setAttribute("title","新标题");document.write(Lists[i].getAttribute("title")+"<br>");}}
</script>
</body>
</html>

6、节点属性

nodeName、nodeValue、nodeType，取节点类型名称、节点值、节点类型

用法Lists[i].nodeName

(1)elementNode.childNodes获取子节点

用法

<script type="text/javascript">var x=document.getElementsByTagName("div")[0].childNodes;
for(i=0;i<x.length;i++){
document.write("节点类型:"+x[i].nodeName+x[i].nodeType+x[i].nodeValue+"<br>");}</script>
(2)firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。lastChild 属性返回‘childNodes’数组的最后一个子节点。 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5>
</div>
<script type="text/javascript">var x=document.getElementById("con");document.write(x.firstChild.nodeName+"<br>");document.write(x.lastChild.nodeName+"<br>");</script>
</body>
</html>

(3)elementNode.parentNode，使用同firstChild

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript<ul> <li id="tcon"> 基础语法</li><li>流程控制语句</li><li>函数</li><li>事件</li><li>DOM</li></ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS <ul><li>文字</li><li>段落</li><li>表单</li><li>表格</li>  </ul> 
</li></ul>  
<script  type="text/javascript">    var mylist = document.getElementById("tcon"); 
document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML);
</script> </body>
</html>
(4)nextSibling 属性可返回某个节点之后紧跟的节点,（处于同一树层级中）

nodeObject.nextSibling

 previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）

nodeObject.previousSibling  

Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">   <li id="a">javascript</li>   <li id="b">jquery</li>   <li id="c">html</li>   </ul>   <ul id="u2">   <li id="d">css3</li>   <li id="e">php</li>   <li id="f">java</li>   </ul>   
<script type="text/javascript">function get_previousSibling(n)
{
var x=n.previousSibling;
while (x && x.nodeType!=1){x=x.previousSibling;}
return x;
}var x=document.getElementsByTagName("li")[2];document.write(x.nodeName);document.write(" = ");document.write(x.innerHTML);var y=get_previousSibling(x);if(y!=null){document.write("<br />previousSibling ");document.write(y.nodeName);document.write(" = ");document.write(y.innerHTML);}else{document.write("<br>已经是最后一个节点");      }</script>
</body>
</html>
(5)插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点

appendChild(newnode)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body><ul id="test"><li>JavaScript</li><li>HTML</li>
</ul> <script type="text/javascript">var otest = document.getElementById("test");  var newnode = document.createElement("li");var newtext= document.createTextNode("PHP");   //或者用newnode.innerHTML="PHP";newnode.appendChild(newtext); otest.appendChild(newnode);</script> </body>
</html>
(6)insertBefore() 方法可在已有的子节点前插入一个新的子节点。
insertBefore(newnode,node); 


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body><ul id="test"><li>JavaScript</li><li>HTML</li></ul> <script type="text/javascript">var otest = document.getElementById("test"); var newnode = document.createElement("li");newnode.innerHTML = "PHP" ;  otest.insertBefore(newnode,otest.childNodes[1]); </script> </body>
</html>
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
nodeObject.removeChild(node) 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head><body>
<div id="content"><h1>html</h1><h1>php</h1><h1>javascript</h1><h1>jquery</h1><h1>java</h1>
</div><script type="text/javascript">
function clearText() {var content=document.getElementById("content");// 在此完成该函数for(var i=content.childNodes.length-1;i>=0;i--){var childNode = content.childNodes[i];content.removeChild(childNode);}}
</script>
<button οnclick="clearText()">清除节点内容</button>
</body>
</html>
(7)replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 
node.replaceChild (newnode,oldnew ) 

实现将 b 标签替换成 i 标签

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body><div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div><a href="javascript:replaceMessage()"> 将加粗改为斜体</a><script type="text/javascript">function replaceMessage(){var oldnode=document.getElementById("oldnode");var oldHTML= oldnode.innerHTML;           var newnode=document.createElement("i");         oldnode.parentNode.replaceChild(newnode,oldnode);newnode.innerHTML=oldHTML;      
}       }    </script></body>
</html>
(8)createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
document.createElement(tagName)

创建一个按钮，代码如下：

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  input.type = "button";  input.value = "创建一个按钮";  body.appendChild(input);  </script>  

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">.message{    width:200px;height:100px;background-color:#CCC;}</style>
</head>
<body>
<script type="text/javascript">
var element = document.createElement("p");element.className = "message";var textNode = document.createTextNode("I love JavaScript!");element.appendChild(textNode);document.body.appendChild(element);
</script> </body>
</html>

创建链接

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var main = document.body;
var body= document.body;
//创建链接
function createa(url,text)
{var a = document.createElement("a");a.href = url;a.innerHTML = text;a.style.color = "red";body.appendChild(a);     
}
// 调用函数创建链接
createa("http://www.imooc.com/","慕课网");</script> 
</body>
</html>






http://www.xdnf.cn/news/11310.html

相关文章：

  • 小区门户网站之后台管理
  • stringstream用法总结
  • 深度解读汽车域控制器
  • 这5款免费的 FTP 客户端，你用过几个？Windows、Mac 和 Linux都适用！
  • 在oracle中的scn技术
  • 关于环网
  • 【安卓Android】VibratorService分析
  • LUN详解
  • 深入浅出了解撞库攻击！
  • 菜鸟也学Ogre-一步步搭建Ogre
  • mysql触发器
  • 三基色、对比色、互补色之间的关系，图片调色基础
  • 推荐10个爬虫工程师必备的工具，让你想爬就爬_爬虫工具
  • 汇编指令lea
  • 关于android的中文文档
  • 从NETSARANG官网下载 Xshell/Xftp个人免费版(所有版本)
  • 超实用 WSUS服务器详细配置部署
  • jQuery2 开发秘籍（五）
  • 【算法精髓】银行家算法
  • BI可视化分析之Pentaho
  • 推荐系统的基本原理与算法解密
  • TLB及其工作原理
  • C# 委托和事件 详解
  • 一款免费、简单、直观的数据库设计工具和 SQL 生成器，在浏览器中直接使用（附源码）
  • BPR(Bayesian Personalized Ranking)算法（1）
  • 6种方法关闭Win10系统的自动更新
  • 攻防世界web新手关之xff_referer
  • JConsole：Java监视与管理控制台
  • 逆向与反汇编实战(一)--PEiD分析复现
  • RIP的基本原理及配置