首页 > 代码库 > DOM学习笔记三

DOM学习笔记三


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

当节点既没有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=http://www.mamicode.com/"通过节点关系获取标签" onclick="getNodeByLevel()"/>>
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 = http://www.mamicode.com/"我的按钮";>


示例 — 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学习笔记三