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

最新推荐文章于 2024-09-07 03:19:38 发布

叶炀

最新推荐文章于 2024-09-07 03:19:38 发布

阅读量2.6k

点赞数

分类专栏：学习记录-javascript

本文链接：https://blog.csdn.net/yeyang123_fy/article/details/45537133

版权

学习记录-javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>