js获取父子兄弟节点

js原始方法虽然可行但是过于繁琐，使用js库jquery更加快捷方便

当然使用之前在head中加入jqury.js文件

    <div class="row">
       <div class="row-left">
         <a href="#">
            <div class="row-img">
              <img class="content-imag" src="resource/images/dating.jpg"/>
            </div>
            <div class="details">
            <h3 class="flag">约会</h3>  <!--这个是要定位到的节点，要获取html值 -->
            <p>怎么样让约会变得有趣？怎么样让ta对自己产生好>感？怎么才能让彼此的关系更进一步？想知道就尽管问吧！</p>
            </div>
          </a>
      </div>
      <div class="row-right">
         <div class="cancel-focus">取消关注</div>  <!--这个是带点击触事件的节点-->
         <div class="focus">关注</div>
      </div>
    </div>

<script type="text/javascript">
$(function() {
  $('.cancel-focus').click(function() {
    alert($(this).parent().prev().children().children('.details').children('.flag').html());  //将节点html内容打印出来
   $(this).parent().prev().children().children('.details').children('.flag').css("background","blue"); //将节点背景设置为蓝色
});
});

</script>

parent()返回父节点

prev()返回前一个兄弟节点

next()返回后一个兄弟节点

children()返回子节点，当有多个子节点的时候可以添加参数，如children('.flag')

上面4种已经能够满足定位到任何一个节点的需求了，如果你的代码过长，你可以添加.css()从而让每一个操作都可视