javascript DOM

来源：互联网发布：学校网络机房设计方案编辑：程序博客网时间：2024/05/01 04:56

        * DOM：前端DOM
           * document对象：文档对象
               * document.documentElement属性：html根元素的一个快捷方式
               * 查找HTML页面的标签：
                   * getElementById()
                   * getElementsByName()
                   * getElementsByTagName()
               * 创建HTML页面的节点：
                   * 元素节点：createElement(标签名)
                   * 文本节点：createTextNode(文本内容)
                   * 属性节点：createAttribute()（不用）
                   * Element对象的设置属性：setAttribute(name,value)
           * element对象：元素对象
               * 解析HTML时，利用元素或节点都可以：最简单的、最容易的
               * 在这里引出element对象，通过element对象获取页面内容，更容易

               * 操作页面元素的属性：
                   * 获取属性：getAttitude(name)
                   * 设置属性：setAttribute(name,value)
                   * 删除属性：removeAttribute(name)
               * 在标签中查找标签，唯一有效的方法：getElementsByTagName()方法
           * node对象：节点对象
               * 节点名称、值和类型：nodeName、nodeType和nodeValue
               * 父节点：parentNode
                   * 其实parentElement和parentNode的效果是一样的
                   * 但是parentElement只支持IE
               * 子节点：
                   * childNodes：返回所有子节点的集合
                   * firstChild：返回第一个子节点
                   * lastChild：返回最后一个子节点
               * 同辈节点
                   * previousSibling：获取上一个兄弟节点
                   * nextSibling：获取下一个兄弟节点
               * 判断是否含有子节点：
                   hasChildNodes()方法：返回值是Boolean值，false是不包含，true是包含
               * 判断是否含有属性：hasAttributes()：判断是否含有属性，不支持IE浏览器
               * 插入节点：
                   * parent.appendChild(child)
                   * parent.insertBefore(newChild,oldChild)
               * 删除节点：parent.removeChild(child)
               * 替换节点：parent.replaceChild(newCHild,oldChild)
               * innerHTML属性
           * DOM解析XML
               * 创建XML解析器

* 只能使用getElementsByTagName(tagname)

<script type="text/javascript">  //获取id="username"的标签的value属性值//1 通过id属性获取对应标签//var username = document.getElementById("username1");//////2 打印value属性值//alert(username.value);//获取name="username"的标签的value属性值//var usernames = document.getElementsByName("username");////alert(usernames.length);//获取input标签的value属性值var inputs = document.getElementsByTagName("input");alert(inputs.length);  </script>

//////////////////////////////////////////

 <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">                //创建<li id="tj" name="tianjin">天津</li>，添加到id="city"标签下                  //1 创建<li id="tj" name="tianjin">天津</li>         //1 创建元素节点<li></li>         var liElement = document.createElement("li");                  //2 创建文本节点"天津"         var text = document.createTextNode("天津");                  //3 将文本节点当作子节点，添加到li标签下         liElement.appendChild(text);                  //4 不能创建属性节点?Element对象         //注意 属性节点不属于子节点         liElement.setAttribute("id","tj");         liElement.setAttribute("name","tianjin");                  //document.createAttribute();一般不用                  //2 获取id="city"标签         var cityElement = document.getElementById("city");                  //3 添加：appendChild()方法，添加到最后面         cityElement.appendChild(liElement);         alert(document.documentElement.nodeName);    </script>

/////////////////////////////////////////////////////////////////////

 <body>    <li id="bj" name="beijing">北京</li>  </body>  <script type="text/javascript">  //获取北京节点的name属性值var bjElement = document.getElementById("bj");alert(bjElement.getAttribute("name"));//outputbeijing//删除北京节点的name属性bjElement.removeAttribute("name");alert(bjElement.getAttribute("name"));//outputnull//设置北京节点的name属性bjElement.setAttribute("name","beijing");alert(bjElement.getAttribute("name"));//outputbeijing  </script>

/////////////////////////////////////////

  <body>    <ul id="city">    <li id="bj" name="beijing">北京</li><li id="sh" name="shanghai">上海</li><li id="cq" name="chongqing">重庆</li>    </ul><select id="edu"><option value="博士">博士</option><option value="硕士">硕士</option><option value="学士">学士</option></select>  </body>

 <script type="text/javascript">  //获取id="city"标签下的所有子节点////1 获取id="city"标签//var cityElement = document.getElementById("city");////2 获取所有子节点//var children = cityElement.childNodes;//childNodes：返回的是子节点的集合//alert(children.length);//获取id="edu"标签的所有子节点//select标签，浏览器解析时，自动增加一个文本内容////1 id="edu"标签//var eduElement = document.getElementById("edu");//////2 获取所有子节点//var children = eduElement.childNodes;////alert(children.length);//在标签中查找标签，唯一有效的方法：getElementsByTagName()var eduElement = document.getElementById("edu");var options = eduElement.getElementsByTagName("option");alert(options.length);  </script>

///////////////////////////////////

节点名称、值和类型

nodeName：其内容是给定节点的名字。
如果是元素节点，nodeName返回这个元素的名称。
如果是属性节点，nodeName返回这个属性的名称。
如果是文本节点，nodeName返回一个内容为#text 的字符串。
nodeType：返回一个整数，这个数值代表着给定节点的类型。
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeValue：返回给定节点的当前值（字符串）。
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点内容。
如果给定节点是一个元素节点，返回值是 null。

 <body>    <input type="text" id="username" name="username" value="username"><p>明天上课</p>  </body>

<script type="text/javascript">  //获取元素节点的nodeName、nodeType和nodeValue//var input = document.getElementById("username");////alert(input.nodeName);//outputinput//alert(input.nodeType);//1//alert(input.nodeValue);//null//获取文本节点的nodeName、nodeType和nodeValue//var pElement = document.getElementsByTagName("p")[0];////var text = pElement.childNodes[0];////alert(text.nodeName);//output#text//alert(text.nodeType);//output3//alert(text.nodeValue);//output明天上课//获取属性节点的nodeName、nodeType和nodeValue/*var input = document.getElementById("username");var attr = input.getAttributeNode("name");alert(attr.nodeName);//outputnamealert(attr.nodeType);//output2alert(attr.nodeValue);//outputusername*//* * nodeName、nodeType和nodeValue * * 获取HTML页面的标签，nodeName知道是什么标签 * * 利用nodeType的值，判断获取的是什么节点 * * 获取文本节点的文本内容，利用nodeValue */  </script>

//////////////////////////////////////////////////////

 <body>    <ul id="city">    <li id="bj" name="beijing">北京</li><li id="sh" name="shanghai">上海</li><li id="cq" name="chongqing">重庆</li>    </ul>  </body>

//////////////////////////////

节点属性（了解）

l节点属性attributes是Node接口定义的属性。

l节点属性attributes就是节点（特别是元素节点）的属性。

l事实上，attributes中包含的是一个节点的所有属性的集合。

lattributes.getNameItem()和Element对象的getAttribute()方法类似。

/////////////////////////////////////////

判断是否含有子节点

<script type="text/javascript">  //判断input标签是否含有子节点var inputElement = document.getElementById("username");//hasChildNodes()方法：返回值是Boolean值，false是不包含，true是包含alert(inputElement.hasChildNodes());var pElement = document.getElementsByTagName("p")[0];//alert(pElement.hasChildNodes());//hasAttributes()：判断是否含有属性，不支持IE浏览器  </script>

///////////////////////////////////

<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">  //创建<li id="tj" name="tianjin">天津</li>，添加到重庆标签的前面////1 创建<li id="tj" name="tianjin">天津</li>////1 创建元素节点<li></li>//var liElement = document.createElement("li");//////2 创建文本节点"天津"//var text = document.createTextNode("天津");//////3 将文本节点当作子节点，添加到li标签下//liElement.appendChild(text);//////4 不能创建属性节点?Element对象//liElement.setAttribute("id","tj");//liElement.setAttribute("name","tianjin");//////2 获取重庆节点//var cqElement = document.getElementById("cq");//////不能使用parent.appendChild(child)//////3 获取重庆的父节点//var parent = cqElement.parentNode;//////4 parent.insertBefore(newChild,oldChild)//parent.insertBefore(liElement,cqElement);//创建<li id="tj" name="tianjin">天津</li>，添加到上海标签的后面//1 创建<li id="tj" name="tianjin">天津</li>//1 创建元素节点<li></li>var liElement = document.createElement("li");//2 创建文本节点"天津"var text = document.createTextNode("天津");//3 将文本节点当作子节点，添加到li标签下liElement.appendChild(text);//4 不能创建属性节点?Element对象liElement.setAttribute("id","tj");liElement.setAttribute("name","tianjin");//2 获取上海节点var shElement = document.getElementById("sh");//3 获取上海的父节点var parent = shElement.parentNode;//4 insertAfter()没有，只能使用insertBefore()var cqElement = shElement.nextSibling;parent.insertBefore(liElement,cqElement);  </script>

/////////////////////////////

 <script type="text/javascript">  //删除北京节点，parent.removeChild(child)//1 获取北京节点var bjElement = document.getElementById("bj");//2 获取北京节点的父节点var parent = bjElement.parentNode;//3 删除parent.removeChild(bjElement);  </script>

//////////////////////////////////////////////////////////

<body>    <ul id="city">    <li id="bj" name="beijing">北京</li><li id="sh" name="shanghai">上海</li><li id="cq" name="chongqing">重庆</li>    </ul><ul id="game">    <li id="fk" name="fankong">反恐<p>精英</p></li><li id="ms" name="moshou">魔兽</li><li id="xj" name="xingji">星际</li>    </ul>  </body>

<script type="text/javascript">  //当点击北京节点时，北京节点被反恐节点替换//document.getElementById("bj").onclick = function(){////1 获取北京节点//var bjElement = document.getElementById("bj");//////2 获取反恐节点//var fkElement = document.getElementById("fk");//////3 获取北京节点的父节点//var parent = bjElement.parentNode;//////4 替换//parent.replaceChild(fkElement,bjElement);////}document.getElementById("bj").onclick = function(){//1 获取北京节点//var bjElement = document.getElementById("bj");//2 获取反恐节点var fkElement = document.getElementById("fk");//3 获取北京节点的父节点var parent = this.parentNode;//4 替换parent.replaceChild(fkElement,this);}//this的用法：必须指代HTML页面中的具体元素  </script>

复制节点

 <body>    <button id="login">登录</button><p>段落</p>

<script type="text/javascript">  //要求复制button按钮，追加到p标签上//1 获取button按钮var button = document.getElementById("login");//2 复制button按钮//cloneNode()方法：只复制了自身节点，接收参数：Boolean值，是否复制子节点var copy = button.cloneNode(true);//3 获取p标签var pElement = document.getElementsByTagName("p")[0];//4 追加pElement.appendChild(copy);  </script>

InnerHTML属性

   <div id="div"></div>

l浏览器几乎都支持该属性，但不是 DOM标准的组成部分。

linnerHTML属性可以用来读，写某给定元素里的 HTML内容。

linnerHTML属性多与div或span标签配合使用。

 <script type="text/javascript">  //将<h1>今天</h1>，添加到div中//第一种方式////1 创建<h1>今天</h1>//var h1Element = document.createElement("h1");//var text = document.createTextNode("今天");//h1Element.appendChild(text);//////2 获取div//var divElement = document.getElementById("div");//////3 插入//divElement.appendChild(h1Element);document.getElementById("div").innerHTML = "<h1>今天</h1>";/* * innerHTML属性 * * 多与div和span标签 *  * WEB1.0与WEB2.0的区别： * * WEB1.0：垂直门户网站(以内容为主) * * WEB2.0：社交网站(以人的关系为主) * * WEB3.0：基于移动互联网的社交网站 */  </script>

0 0