DOM学习笔记三

时间：2014-12-08 23:07:38 阅读：557 评论：0 收藏：0 [点我收藏+]

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

当节点既没有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>

DOM学习笔记三

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)