首页 > 代码库 > Js中的dom

Js中的dom

2024-09-15 22:49:55   221人阅读

  • 文档对象模型
    • html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改(在dom树当中 一切皆为节点对象)
  • Dom的方法和属性
    • getElementById() 寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

Code：输出 <input type="text" name="username" value="http://www.mamicode.com/天天学习，好好向上" id="tid" >标签value属性的值

<body>

         <form name="form1" action="test.html" method="post" >

                  <input type="text" name="username" value="http://www.mamicode.com/天天学习，好好向上" id="tid" onchange="" >

<input type="button" name="ok" value="http://www.mamicode.com/保存1"/>

         </form>

</body>

<script type="text/javascript">

 

var inputNode = document.getElementById("tid");

alert(inputNode.value);

</script>

  

Code：输出 <input type="text" name="username" value="http://www.mamicode.com/天天学习，好好向上" id="tid" >标签type属性的值

<body>

         <form name="form1" action="test.html" method="post" >

                  <input type="text" name="username" value="http://www.mamicode.com/天天学习，好好向上" id="tid" onchange="" >

<input type="button" name="ok" value="http://www.mamicode.com/保存1"/>

         </form>

</body>

<script type="text/javascript">

//输出 <input type="text" name="username" value="http://www.mamicode.com/IT精英培训" id="tid" >标签type属性的值

/* var inputNode = document.getElementById("tid");

alert(inputNode.type);

*/

</script>
  • getElementsByName() 寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

code

<body>

         <form name="form1" action="test.html" method="post" >

                  <input type="text" name="tname" value="http://www.mamicode.com/IT_1" id="tid_1" ><br>

<input type="text" name="tname" value="http://www.mamicode.com/IT_2" id="tid_2" ><br>

<input type="text" name="tname" value="http://www.mamicode.com/IT_3" id="tid_3" ><br>

<input type="button" name="ok" value="http://www.mamicode.com/保存1"/>

         </form>

</body>

 

<script type="text/javascript">

 

//通过元素的name属性获取所有元素的引用

var inputNodes = document.getElementsByName("tname");

//测试该数据的长度

alert(inputNodes.length);

//遍历元素,输出所有value属性的值

for(var i=0;i<inputNodes.length;i++){

                var inputNode = inputNodes[i];

                alert(inputNode.value);

}

//为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值

for(var i=0;i<inputNodes.length;i++){

                var inputNode = inputNodes[i];

                inputNode.onchange = function(){

                        alert(this.value);

                };

}
  • getElementsByTagName() 寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数

code

<body>

<form name="form1" action="test.html" method="post" >

                  <input type="text" name="tname" value="http://www.mamicode.com/好好学习，天天向上1" id="tid_1" ><br>

<input type="text" name="tname" value="http://www.mamicode.com/好好学习，天天向上2" id="tid_2" ><br>

<input type="text" name="tname" value="http://www.mamicode.com/好好学习，天天向上3" id="tid_3" ><br>

<input type="button" name="ok" value="http://www.mamicode.com/保存1"/>

         </form>

 

<select name="edu" id="edu">

         <option value="http://www.mamicode.com/博士">博士^^^^^</option>

<option value="http://www.mamicode.com/硕士" selected="selected">硕士^^^^^</option>

<option value="http://www.mamicode.com/本科" >本科^^^^^</option>

<option value="http://www.mamicode.com/幼儿园">幼儿园^^^^^</option>

</select>

 

<select name="job" id="job" >

         <option value="http://www.mamicode.com/美容">美容^^^^^</option>

<option value="http://www.mamicode.com/IT">IT^^^^^</option>

<option value="http://www.mamicode.com/程序员">程序员^^^^^</option>

<option value="http://www.mamicode.com/建筑师">建筑师^^^^^</option>

</select>

 

<br/>

<input id="btn" type="button" value="http://www.mamicode.com/输出select被选中的值" />

</body>

 

<script type="text/javascript">

 

//获取所有的input元素,返回值是数组

var inputNodes = document.getElementsByTagName("input");

//测试长度

alert(inputNodes.length);

//遍历value的值

         for(var i=0;i<inputNodes.length;i++){

                var inputNode = inputNodes[i];

                alert(inputNode.value);

}

//输出type="text"中 value属性的值 不包含按钮(button)

for(var i=0;i<inputNodes.length;i++){

                var inputNode = inputNodes[i];

                if(inputNode.type=="text"){

                        alert(inputNode.value);

                }

}

 

//输出所有下拉选select的option标签中value的值

var optionNodes = document.getElementsByTagName("option");

for(var i=0;i<optionNodes.length;i++){

                var optionNode = optionNodes[i];

                alert(optionNode.value);

}

   

//输出所有下拉选 id="edu"中option标签中 value属性的值

var edu = document.getElementById("edu");

var optionNodes = edu.getElementsByTagName("option");

for(var i=0;i<optionNodes.length;i++){

                var optionNode = optionNodes[i];

                alert(optionNode.value);

}

 

        //点击按钮输出下拉框中被选中的值

         var btn = document.getElementById("btn");

        btn.onclick = function(){

                var optionNodes = document.getElementsByTagName("option");

for(var i=0;i<optionNodes.length;i++){

                var optionNode = optionNodes[i];

                if(optionNode.selected){

                        alert(optionNode.value);

                }

}

        };

 

</script>
  • hasChildNodes() 该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

Code:

<body>

          

<form name="form1" action="test.html" method="post" >

         <input type="text" name="tname" value="http://www.mamicode.com/好好学习，天天向上_1" id="tid_1" /><br>

<input type="text" name="tname" value="http://www.mamicode.com/好好学习，天天向上_2" id="tid_2" /><br>

<input type="text" name="tname" value="http://www.mamicode.com/好好学习，天天向上_3" id="tid_3" /><br>

<input type="button" name="ok" value="http://www.mamicode.com/保存1"/>

         </form>

 

<select name="edu" id="edu">

         <option value="http://www.mamicode.com/博士">博士^^^^^</option>

<option value="http://www.mamicode.com/硕士">硕士^^^^^</option>

<option value="http://www.mamicode.com/本科" selected="selected" >本科^^^^^</option>

<option value="http://www.mamicode.com/幼儿园">幼儿园^^^^^</option>

</select>

 

<select name="job" id="job" >

         <option value="http://www.mamicode.com/美容">美容^^^^^</option>

<option value="http://www.mamicode.com/IT">IT^^^^^</option>

<option value="http://www.mamicode.com/程序员">程序员^^^^^</option>

<option value="http://www.mamicode.com/建筑师">建筑师^^^^^</option>

</select>

 

</body>

 

<script type="text/javascript">

 

//查看id="edu"的节点是否含有子节点

var edu = document.getElementById("edu");

alert(edu.hasChildNodes());

   

//查看id="tid_1"的节点是否含有子节点

var tid_1 = document.getElementById("tid_1");

alert(tid_1.hasChildNodes());

 

</script>
  • nodeName属性（nodeName是一个只读属性）
    • 文档中每个每个节点都有以下属性。
    • nodeName:一个字符串，其内容是给定节点的名字。
    • 如果节点是元素节点，nodeName返回的是这个元素的名称
    • 如果是属性节点，nodeName返回这个属性的名称
    • 如果是文本节点，nodeName返回一个内容为#text的字符串
  • nodeType属性(nodeType是个只读属性)
    • nodeType:返回一个整数，这个数值代表着给定节点的类型。
      • nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：

        Node.ELEMENT_NODE ---1 -- 元素节点

        Node.ATTRIBUTE_NODE ---2 -- 属性节点

        Node.TEXT_NODE ---3 -- 文本节点

  • NodeValue属性
    • 如果给定节点是一个属性节点，返回的是这个属性值。
    • 如果给定节点是个文本节点，返回值是这个文本几点的内容。
    • 如果给定节点是一个元素节点，返回值是null
    • NodeValue是一个读写属性，但是不能给元素节点的nodeValue属性设置值，但可以为文本节点的nodeValue属性设置一个值。

Code：

<body>

          

<form name="form1" action="test.html" method="post" >

                  <input type="text" name="tname" value="http://www.mamicode.com/好好学习，天天向上_1" id="tid_1" ><br>

<input type="text" name="tname" value="http://www.mamicode.com/好好学习，天天向上_2" id="tid_2" ><br>

<input type="text" name="tname" value="http://www.mamicode.com/好好学习，天天向上_3" id="tid_3" ><br>

<input type="button" name="ok" value="http://www.mamicode.com/保存1"/>

         </form>

 

<p id="pid">明天上课</p>

 

</body>

 

<script type="text/javascript">

 

//元素节点 id="tid_1" 输出nodeName nodeType nodeValue

var node = document.getElementById("tid_1");

alert(node.nodeName);//input

alert(node.nodeType);//1

alert(node.nodeValue);//null

   

//文本节点 id="pid" 输出nodeName nodeType nodeValue

var node = document.getElementById("pid");

var textNode = node.firstChild;

alert(textNode.nodeName);//#text

alert(textNode.nodeType);//3

alert(textNode.nodeValue);//明天上课

   

//属性节点 id="pid" 输出nodeName nodeType nodeValue

var node = document.getElementById("pid");

var p = node.getAttributeNode("id");

alert(p.nodeName);//id

alert(p.nodeType);//2

alert(p.nodeValue);//pid */

</script>
  • replaceChild() 把一个给定父元素里的一个子节点替换为另外一个子节点

Code：

<body>

您喜欢的城市:<br>

<ul>

         <li id="bj" value="http://www.mamicode.com/beijing">北京</li>

<li id="sh" value="http://www.mamicode.com/shanghai">上海</li>

<li id="cq" value="http://www.mamicode.com/chongqing"> 重庆</li>

</ul>

 

您喜欢的游戏:<br>

<ul>

         <li id="fk" value="http://www.mamicode.com/fangkong">反恐<p>精英</p></li>

<li id="ms" value="http://www.mamicode.com/moshou">魔兽</li>

<li id="cq" value="http://www.mamicode.com/chuanqi">传奇</li>

</ul>

</body>

 

<script type="text/javascript">

 

//点击北京节点， 将被反恐节点替换

var bj = document.getElementById("bj");

var fk = document.getElementById("fk");

bj.onclick = function(){

        var parentNode = this.parentNode;

        parentNode.replaceChild(fk,this);

};

   

</script>
  • getAttribute() 返回一个给定元素的一个给定属性节点的值

Code：

<body>

          

您喜欢的城市:<br>

<ul>

         <li id="bj" value="http://www.mamicode.com/beijing">北京</li>

<li id="sh" value="http://www.mamicode.com/shanghai">上海</li>

<li id="cq" value="http://www.mamicode.com/chongqing">重庆</li>

</ul>

 

您喜欢的游戏:<br>

<ul>

         <li id="fk" value="http://www.mamicode.com/fangkong">反恐</li>

<li id="ms" value="http://www.mamicode.com/moshou">魔兽</li>

<li id="xj" value="http://www.mamicode.com/xingji">星际争霸</li>

</ul>

</body>

 

<script type="text/javascript">

 

//<li id="xj" value="http://www.mamicode.com/xingji">星际争霸</li>节点的value属性的值

var xj = document.getElementById("xj");

alert(xj.getAttribute("value"));

 

</script>
  • setAttribute() 将给定元素节点添加一个新的属性值或改变它的现有属性的值

Code：

<body>

 

您喜欢的城市:<br>

<ul>

         <li id="bj" value="http://www.mamicode.com/beijing">北京</li>

<li id="sh" value="http://www.mamicode.com/shanghai">上海</li>

<li id="cq" value="http://www.mamicode.com/chongqing">重庆</li>

</ul>

 

您喜欢的游戏:<br>

<ul>

         <li id="fk" value="http://www.mamicode.com/fangkong">反恐</li>

<li id="ms" value="http://www.mamicode.com/moshou">魔兽</li>

<li id="xj" value="http://www.mamicode.com/xingji" >星际争霸</li>

</ul>

</body>

 

<script type="text/javascript">

 

//给这个节点增加 name属性 <li id="xj" value="http://www.mamicode.com/xingji" name="xingjizhengba">星际争霸</li>

var xj = document.getElementById("xj");

xj.setAttribute("name","xingjizhengba");

         //测试

         alert(xj.getAttribute("name"));

          

</script>
  • createElement() 按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.

Code：增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下

<body>

 

您喜欢的城市:<br>

<ul id="city">

         <li id="bj" value="http://www.mamicode.com/beijing">北京</li>

<li id="sh" value="http://www.mamicode.com/shanghai">上海</li>

<li id="cq" value="http://www.mamicode.com/chongqing">重庆</li>

</ul>

 

您喜欢的游戏:<br>

<ul>

         <li id="fk" value="http://www.mamicode.com/fangkong">反恐</li>

<li id="ms" value="http://www.mamicode.com/moshou">魔兽</li>

<li id="xj" value="http://www.mamicode.com/xingji">星际争霸</li>

</ul>

</body>

<script type="text/javascript">

 

//增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下

var li = document.createElement("li");

li.setAttribute("id","tj");

li.setAttribute("v","tianjin");

 

var txt = document.createTextNode("天津");

li.appendChild(txt);

 

var city = document.getElementById("city");

 

city.appendChild(li);

 

   

 

</script>
  • insertBefore() 把一个给定节点插入到一个给定元素节点的给定子节点的前面

       

code

<body>

<ul>

         <li id="bj" name="beijing">北京</li>

<li id="sh" name="shanghai">上海</li>

<li id="cq" name="chongqing">重庆</li>

</ul>

</body>

 

<script type="text/javascript">

 

        // 创建新的节点 <li id="tj" name="tianjin">天津</li>

         var li = document.createElement("li");

li.setAttribute("id","tj");

li.setAttribute("v","tianjin");

 

var txt = document.createTextNode("天津");

li.appendChild(txt);

// 在 <li id="cq" name="chongqing">重庆</li>的前面

var ul = document.getElementsByTagName("ul");

var cq = document.getElementById("cq");

ul[0].insertBefore(li,cq);

   

</script>
  • removeChild() 从一个给定元素里删除一个子节点

code

<body>

<ul id="city">

         <li id="bj" name="beijing">北京</li>

<li id="sh" name="shanghai">上海</li>

<li id="cq" name="chongqing">重庆</li>

</ul>

</body>

 

<script type="text/javascript">

 

//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>

var city = document.getElementById("city");

var bj = document.getElementById("bj");

city.removeChild(bj);

 

</script>
  • innerHTML innerHTML 属性可以用来读，写某给定元素里的 HTML 内容

code

<body>

         <div id="subject">jquery</div>

</body>

<script language="JavaScript">

          

//使用innerHTML读出id=subject中的文本内容

var div = document.getElementById("subject");

alert(div.innerHTML);

 

//将<h1>今天</h1>写到div的层中

var div = document.getElementById("subject");

div.innerHTML = "<h1>今天</h1>";

   

   

          

</script>

 

 

Js中的dom


联系
我们