DOM入门

最新推荐文章于 2022-02-08 23:55:11 发布

winfredzen

最新推荐文章于 2022-02-08 23:55:11 发布

阅读量317

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM入门

DOM树

HTML文档可以说由节点构成的集合，DOM节点有:

元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:

遍历节点树:

以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

方法

getElementsByName()方法通过元素的 name 属性查询元素，而不是通过 id 属性。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
  var mynode=  document.getElementsByName('myt')       ;  
  alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">

<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>
</html>

checkbox
Check/Uncheck checkbox with javascript?

Javascript:

// Check
document.getElementById("checkbox").checked = true;

//  Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

//  Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

//  Uncheck
$("#checkbox").attr("checked", false);

判断input的type为checkbox：

        var hobby = document.getElementsByTagName("input");
        for(var i=0;i<hobby.length;i++)
        {
            if(hobby[i].type == "checkbox")
            {
                hobby[i].checked = true;
            }
        }

getAttribute()方法，通过元素节点的属性名称获取属性的值。
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

二、nodeValue 属性：节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

运行结果:

访问子结点childNodes

子节点
IE:

  UL子节点个数:3
  节点类型:1

其它浏览器:

   UL子节点个数:7
   节点类型:3

注意:

IE全系列、firefox、chrome、opera、safari兼容问题
节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，如下图所示:

如果把代码改成这样:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

运行结果:（IE和其它浏览器结果是一样的）

  UL子节点个数:3
  节点类型:1

firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
访问父节点parentNode

访问兄弟节点

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：

nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点，跳过。

这里写图片描述

运行结果:

LI = javascript
nextsibling: LI = jquery

插入节点appendChild()
这里写图片描述

插入节点insertBefore()
这里写图片描述

删除节点removeChild()
这里写图片描述
运行结果:

HTML
删除节点的内容: javascript

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。

如果要完全删除对象，给 x 赋 null 值，代码如下:
这里写图片描述

替换元素节点replaceChild()

<body>


  <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

    <script type="text/javascript">
      function replaceMessage(){
        var oldnode=document.getElementById("oldnode");
        var newnode=document.createElement("i");
        newnode.innerHTML=oldnode.innerHTML
        oldnode.parentNode.replaceChild(newnode,oldnode);

       }    
  </script>

 </body>

创建元素节点document.createElement(tagName)

winfredzen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM入门

DOM入门HTML文档可以说由节点构成的集合，DOM节点有:元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。节点属性: 遍历节点树: 以上图ul为例，它的父级节点b
复制链接

扫一扫