DOM对象

最新推荐文章于 2022-03-24 15:29:25 发布

贾斯伯

最新推荐文章于 2022-03-24 15:29:25 发布

阅读量325

点赞数

本文链接：https://blog.csdn.net/jiakaishow/article/details/49406421

版权

在学习DOM对象过程中，遇到了一些问题，总结出一些经验和规律。在这里记录一下。

1. 所有对节点的增加、删除和替换操作，操作对象都是父节点，也就是为其添加子节点、删除子节点和替换子节点。

如果需要对某节点前后增加或删除、替换，都要找到它的父节点，对它的父节点来进行操作。

例如下面的代码，如果要替换id为oldnode的b标签，需要对oldnode.parentNode使用appChild()

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>


  <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
  
    <script type="text/javasacript">
      function replaceMessage(){
          var newNode=document.createElement("i");
          var newTextNode=document.createTextNode("JavaScript");
          newNode.appendChild(newTextNode);
          oldnode.parentNode.replaceChild(newNode,document.getElementById("oldnode"));
		   
       }    
  </script>
  
 </body>
</html>

如果要在HTML的body中添加标签，需要对document.body使用appendChild(newNode)

2. 创建一个完整的含有文本内容的p标签，有两种方法。

一是可以新建的p元素设置innerHTML：

var newNode=document.createElement("p"); 
newNode.innerHTML="content";

二是可以为新建的p元素续接(append我认为翻译为续接更准确)一个新建的文本节点：

var newNode=document.createElement("p); 
var newTextNode=document.createTextNode("content"); 
newNode.appendChild(newTextNode);

3. Firefox,Chrome,Opera,Safari浏览器中，节点之间的空白也是文本节点，IE浏览器不是。

4. elementNode.childNodes和elementNode.parentNode的对象都为元素节点，其余的对象可以为任何节点，C例如firstChild和lastChild。

5. createElement()和createTextNode()是document方法。

6. 获取不同浏览器的窗口的宽高方法：

var w= document.documentElement.clientWidthh|| document.body.clientWidth;
var h= document.documentElement.clientHeight|| document.body.clientHeight;

获取网页的宽高：

var w=document.documentElement.scrollWidth|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight|| document.body.scrollHeight;

获取网页内容的宽高：

var w= document.documentElement.offsetWidth|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight|| document.body.offsetHeight;

7. getElementById() 等其实也可以对某特定元素操作，例如：

var tbody = document.getElementById('table').lastChild;	
trs = tbody.getElementsByTagName('tr');

8. 最最重要的一点，table下一个子节点是<tbody></tbody>，而不是<tr>

DOM 练习

主要是练习DOM对象操作的熟练程度，主要技能点有以下几点：

1. table的下一个子节点是<tbody>。

2. 如果要筛选掉表头，可以在遍历的时候让计数器i的初始值=1即可。

3. 要给每一行都加上mouseover和mouseout的效果，可以对tr进行遍历，在遍历中给每一行设置事件（使用this调用本行对象）。

贾斯伯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM对象

在学习DOM对象过程中，遇到了一些问题，总结出一些经验和规律。在这里记录一下。1. 所有对节点的增加、删除和替换操作，操作对象都是父节点，也就是为其添加子节点、删除子节点和替换子节点。如果需要对某节点前后增加或删除、替换，都要找到它的父节点，对它的父节点来进行操作。2.创建一个完整的含有文本内容的p标签，有两种方法，一是可以新建的p元素设置innerHTML，var newNode=d
复制链接

扫一扫