码迷,mamicode.com
首页 > 其他好文 > 详细

DOM学习笔记三

时间:2014-12-08 23:08:19      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   使用   sp   


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

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

   <!--
        通过节点关系获取节点
        关系:
        1.父节点:parentNode,一个父节点
        2.子节点:childNodes ,直接后代节点集合
        3.兄弟节点:比较少用,因为没有浏览器的解析方式,顺序就不一样
            上一个兄弟节点:previousSibing
            下一个兄弟节点:nextSibing
    -->

<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> 

DOM学习笔记三

标签:des   style   blog   http   io   ar   color   使用   sp   

原文地址:http://blog.csdn.net/wjw0130/article/details/41809685

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!