DOM操作实例-优快云博客

本文链接：https://blog.youkuaiyun.com/haoranli/article/details/73380215

<html>
<head>
	<title>节点访问</title>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <meta name="author" content="" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />
   <style type="text/css">
   </style>
  
   <script type="text/javascript">
      function findNode(){
         //查找html节点
       var htmlChild = document.firstChild;
       //查找body节点
       var bodyChild = htmlChild.lastChild; 
       //查找table节点
       var tableChild = bodyChild.firstChild;
       //弹出节点名称
        // alert(htmlChild.nodeName);
        // alert(bodyChild.nodeName);
        alert(tableChild.nodeName);
      }
      function editdNode(){
       //找到body节点
        var node_body = document.body;
       //找到table节点
       var node_table = node_body.firstChild;
       //找到隐藏的tTable
       var node_tbody = node_table.firstChild;
       // 找到td所在的行
       var node_tr = node_tbody.lastChild;
       var node_td = node_tr.childNodes[1];
       //找到文本节点
       var node_text= node_td.firstChild;
       node_text.nodeValue = "女";
       // alert(node_text.nodeValue);
      }
   </script>
</head>
<body ><table width="500" border="1"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>30</td></tr></table>
<input type="button" value="查看节点"  οnclick="findNode()">
<input type="button" value="修改性别"  οnclick="editdNode()">
</body>
</html>

注意：

1.核心DOM公共属性和方法
nodeName：节点名称。
nodeValue：节点的值。
firstChild：第一个子节点。
lastChild：最后一个子节点。
parentNode：父节点。
childNodes：子节点列表，是一个数组

2.在Firefox下，会把空格或换行，当成一个文本节点。因此，所有标记之间的空格和换行，都去掉

3.在table之内隐藏一个tbody 节点

4.查找html节点的方法
document.firstChild
document.documentElement(兼容性较好)

5.查找body节点的方法
document.firstChild.lastChild
document.body(推荐使用)