DOM学习笔记三

来源：互联网发布：中档女装品牌知乎编辑：程序博客网时间：2024/06/05 09:25

通过节点层次关系获取节点：(重要)

当节点既没有id，也没有name，通过节点当中的关系，是另一种获取节点方式

<script type="text/javascript">        function getNodeByLevel() {            //获取页面中的表格节点            var tableNode = document.getElementById("tableId");            //获取父节点            //var node  = tableNode.parentNode;            //alert(node.nodeName);            //获取子节点            var chnodes = tableNode.childNodes;            //不知为啥，table的第一个孩子节点是#text(文本节点),浏览器的原因            //table标签完了之后是一个回车，谷歌浏览器认为是一个空白的文本节点           // alert(chnodes[1].childNodes[0].nodeName);            //获取兄弟节点            var preBrotherNode = tableNode.previousSibling;            alert(preBrotherNode.nodeName);            //尽量少用兄弟节点，因为浏览器不同解析不一致，很容易就解析出文本节点        }    </script>    <input type="button" value="通过节点关系获取标签" onclick="getNodeByLevel()"/>    <div>div区域</div>    <table id="tableId">        <tr>            <td>单元格一</td>            <td>单元格二</td>        </tr>    </table>    <dl>        <dt>上层项目</dt>        <dd>下层项目</dd>    </dl>    <a href="http://www.baidu.com">百度</a>

DOM的节点操作：创建并添加

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        div{            border:#FF00FF solid 1px;            width: 200px;            padding:25px;            margin: 10px;        }        #div1{            background-color: #F0000F;        } #div2{            background-color: #0CCFFF;        } #div3{            background-color: #0FF00F;        }    </style></head><body>        <script type="text/javascript">            //创建并添加节点            //在div1中添加一个文本节点            function CreatAndAddNode1_1(){                /*                1.创建文本节点                2.获取div1节点                3.将文本节点添加到div1节点中                 */                var oTextNode = document.createTextNode("文本节点");                var odiv1Node = document.getElementById("div1");                odiv1Node.appendChild(oTextNode);            }            //在div1中创建并添加按钮节点            function CreatAndAddNode1_2(){                //没有创建按钮这个方法，所以创建元素                var obuttonNode = document.createElement("input");                obuttonNode.type = "button";//指定类型                obuttonNode.value = "我的按钮";                var odiv2Node = document.getElementById("div1");                //将按钮添加div1节点中                odiv2Node.appendChild(obuttonNode);            }            function CreatAndAddNode2(){                //通过另一种方式添加节点                /*                使用容器型标签中的一个属性innerHTML                这个属性可以设置html文本                 */                var odiv1Node = document.getElementById("div1");                //odiv1Node.innerHTML = "ceshiyixia";//不论点多少下只能覆盖                odiv1Node.innerHTML="<input type='button' value='我的小按钮'>";                odiv1Node.innerHTML="<a href='http://www.baidu.com'>我的超链接</a>";//覆盖上面按钮            }            function DeleteNode(){                    //将'你好'节点删除                var odiv2Node = document.getElementById("div2");                 //odiv2Node.remove();              odiv2Node.parentNode.removeChild(odiv2Node);            }            function ChangeNode1_1(){                //用div3节点添换div1节点                var odiv3Node = document.getElementById("div3");                var odiv1Node = document.getElementById("div1");                odiv1Node.parentNode.replaceChild(odiv3Node,odiv1Node);//用div3替换div1            }            function ChangeNode1_2(){                //把div1克隆成div3                var odiv3Node = document.getElementById("div3");                var odiv1Node = document.getElementById("div1");                var ocopyNode3 =odiv3Node.cloneNode(true);//将true，连文本都克隆                odiv1Node.parentNode.replaceChild(ocopyNode3,odiv1Node);//div1克隆div3            }        </script>        <input type="button" value="创建并添加节点" onclick="CreatAndAddNode1_1()">        <input type="button" value="创建并添加节点按钮" onclick="CreatAndAddNode1_2()">        <input type="button" value="创建并添加节点按钮2" onclick="CreatAndAddNode2()">        <input type="button" value="删除节点" onclick="DeleteNode()">        <input type="button" value="改变节点_替换" onclick="ChangeNode1_1()">        <input type="button" value="改变节点_克隆" onclick="ChangeNode1_2()">       <div id="div1"> </div>       <div id="div2">  你好  </div>       <div id="div3">  我好  </div></body></html>

示例 — DOM新闻字体：

演示新闻字体的大中小字体样式

步骤：
1.用标签封装新闻字体
2.定义样式
3.确定事件源，以及处理方式中被处理的节点
事件源：<a> 事件：onclick
被处理的节点：div-newstext

因为要给超链接加入自定义的事件处理，所以就要先确定超链接的默认点击效果
href="javascript:void(0)",只要是取消超链接效果，都是用这个方式。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        a:link,a:visited{/*访问前访问后样式不遍*/            color:#0044FF;            text-decoration: none;        }        a:hover{            color: #FF8800;        }        #newstext{            width: 400px;            border: #F000FF solid 1px;            padding: 10px;        }    </style></head><body>        <script type="text/javascript">            function changeFont(SIZE){                //获取div节点对象                var odivNode = document.getElementById("newstext");                //获取 odivNode 的style属性 对象                odivNode.style.fontSize = SIZE;//CSS中样式的属性如font-size,DOM中就是fontSize            }        </script>        <h1>新闻标题</h1><hr/>          <a href="javascript:void(0)" onclick="changeFont('24px')">大字体</a>          <a href="javascript:void(0)" onclick="changeFont('16px')">中字体</a>          <a href="javascript:void(0)" onclick="changeFont('12px')">小字体</a> <br>        <div id="newstext">            阿斯顿所得到的的点点滴滴的点点滴滴的点点滴滴的点点滴滴单独            ....        </div></body></html>

如果根据用户点击所需要的效果不唯一，那么仅通过传递参数，虽然实现了效果，但是传参过多，阅读性差，js代码和css代码耦合性高，不利用扩展

解决方案，将多个所需的样式，进行封装，封装到选择器中，只要给指定的标签加载不同的选择器，就可以了

预定义样式(一般使用类选择器，注意定义样式的优先级问题)

<!DOCTYPE html><html><head lang="en">   <!-- <link href="1.css" id="xxx"/>            下面的样式代码，就可以封装到单独的css文件中            同样也可以获取到link标签，通过js的方法传递2.css，就可以实现改变另一样式的效果   -->    <meta charset="UTF-8">    <title></title>    <style type="text/css">        a:link,a:visited{/*访问前访问后样式不遍*/            color:#0044FF;            text-decoration: none;        }        a:hover{            color: #FF8800;        }        #newstext{            width: 400px;            border: #F000FF solid 1px;            padding: 10px;        }        .norml{            color: #000000;            font-size: 16px;            background-color: #CDD8D0;        }        .max{            color: #808080;            font-size: 28px;            background-color: #9CE9B4;        }        .min{            color: #FF0000;            font-size: 12px;            background-color: #Ffffff;        }    </style></head><body>        <script type="text/javascript">            function changeFont(selectorname){                var odivNode = document.getElementById("newstext");                odivNode.className = selectorname;//html中是class，DOM是className            }        </script>        <h1>新闻标题</h1><hr/>          <a href="javascript:void(0)" onclick="changeFont('max')">大字体</a>          <a href="javascript:void(0)" onclick="changeFont('norml')">中字体</a>          <a href="javascript:void(0)" onclick="changeFont('min')">小字体</a> <br>        <div id="newstext" class = "norml">            阿斯顿所得到的的点点滴滴的点点滴滴的点点滴滴的点点滴滴单独            ...        </div></body></html>

0 0