javascript DOM小结

最新推荐文章于 2024-09-16 08:47:17 发布
最新推荐文章于 2024-09-16 08:47:17 发布
阅读量70 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yingu/p/5080756.html
版权

一：定义

dom：文档对象模型。

dom是针对HTML和XML文档的一个API。dom描绘了一个层次化的节点树，允许开发人员添加、移除、修改页面的某一部分。

1：childNodes（返回当前节点的子节点列表）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom1</title>
    <style>
        li{
            height: 30px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <ul id="uls">
        <li></li>
        <li></li>
    </ul>
</body>
<script>
        var uls = document.getElementsByTagName("ul")[0];
    //chrome:5 ,ie>=9 :5; ie<=8 :2 
    alert(uls.childNodes.length);
</script>
</html>

chrome弹出5（），为什么是5？如图：

3个文本节点（红，蓝，黑），2个元素节点（方框圈起来的）。ie5-8弹出2，说明其中节点并不包含文本节点。

如果如下写法会报错（文本节点不能设置background）：

    for(var i = 0; i <= uls.childNodes.length; i++){
       uls.childNodes[i].style.background = "red";
    }

兼容写法：当节点为元素节点的时候设置其背景色

　　for(var i = 0 ; i <= uls.childNodes.length ; i++){
        //nodeType  -->1元素节点
        if(uls.childNodes[i].nodeType == 1){
            uls.childNodes[i].style.background = "red";
        }
    }

2：children（该属性返回节点的子元素--不包含文本节点）

 

         alert(uls.children.length);                                         //chrome和ie 都为2
         for(var i = 0 ; i <= uls.children.length ; i++){
        uls.children[i].style.background = "red";
    }

 

注意：不论是children、childNodes，子节点只算第一层的，子节点中的元素不算在其中（那个是孙子节点）。

3：parentNode（返回指定节点的父节点）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom1</title>
    <style>
        li{
            height: 30px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <ul id="uls">
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    var uls = document.getElementById("uls");
    alert(uls.parentNode);
</script>
</html>

4：offsetParent（返回最近的祖先定位元素）

定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom1</title>
    <style>
        #wrapper{
            position: relative;
            width: 200px;
            height: 200px;
        }
        #inner{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="noPosition">
            <div id="inner"></div>
        </div>
    </div>
</body>
<script>
    var sonNode = document.getElementById("inner");
    alert(sonNode.offsetParent.id);
</script>
</html>

如果容器元素未设置css定位，则返回body或html

5：firstChild  (firstElementChild)

兼容问题：

　　ie6~8：                firstChild

　　其他浏览器：  firstElementChild

兼容写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom1</title>
</head>
<body>
    <ul id="uls">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    var uls = document.getElementById("uls");
    if(uls.firstElementChild){
        uls.firstElementChild.style.background = "red";
    }else{
        uls.firstChild.style.background = "red";
    }
</script>
</html>

6：lastChild   (lastElementChild)

兼容问题：

　　ie6~8：               lastChild

　　其他浏览器：         lastElementChild

用法同firstChild。

7：nextSibling（nextElementSibling）

兼容问题：

　　ie6~8：               nextSibling

　　其他浏览器：         nextElementSibling

用法同上

8：previousSibling（previousElementSibling）

兼容问题：

　　ie6~8：               previousSibling

　　其他浏览器：         previousElementSibling

用法同上

9：getAttribute，setAttribute，removeAttribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
</head>
<body>
    <input type="text" id="btn1" />
    <input type="button" value="按钮" id="btn2" name="2" />
</body>
<script>
    // 用dom的方式操纵元素属性
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    btn2.onclick = function(){
    // btn1.value = "1234";
        // btn1["value"] = "1234"
        var btn2Value = btn2.getAttribute('value');
        alert(btn2Value);
        btn1.setAttribute("value",btn2Value);
        btn2.removeAttribute("value");
    }
    // 获取：getAttribute(属性名称)
       // 设置：setAttribute(属性名称，值)
       // 删除：removeAttribute(属性名称)
</script>
</html>

10：createElement（创建元素节点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul id="uls">
        
    </ul>
    <input type="button" value="创建li" />
</body>
<script>
    var uls = document.getElementsByTagName("ul")[0];
    var btns = document.getElementsByTagName("input")[0];
    btns.onclick = function(){
        var lis = document.createElement("li");
        uls.appendChild(lis);
    // 父级.appendChild(创建的元素);
    }
</script>
</html>

11：createTextNode（创建文本节点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="main">
</div>
</body>
<script>
    var main = document.getElementById("main");
    var textNode = document.createTextNode("<h1>wefwedf</h1>");
    main.appendChild(textNode);
</script>
</html>

结果：

12：appendChild（指定元素节点的最后一个子节点之后添加节点）

父级.appendChild(子节点)。

用法见上

13：insertBefore（在已有的子节点前插入一个新的子节点）

父级.insertBefore(子节点,在谁之前)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" />
    <input type="button" value="插入元素" />
    <ul>
        
    </ul>
</body>
<script>
    var txt = document.getElementsByTagName("input")[0];
    var btn = document.getElementsByTagName("input")[1];
    var uls = document.getElementsByTagName("ul")[0];
    // btn.onclick = function(){
    // 　　var lis = document.createElement("li");
    // 　　lis.innerHTML = txt.value;
    // 　　uls.appendChild(lis);
    // }   
    // 父级.appendChild(子节点);
    // 父级.insertBefore(子节点,在谁之前)；
    btn.onclick = function(){
        var lic = document.createElement("li");
        var lis = document.getElementsByTagName("li");
        lic.innerHTML = txt.value;
        uls.insertBefore(lic,lis[0]);// ie下会报错，因为初始时没有li。
    }
</script>
</html>

解决上面的栗子初始化时ie8及以下报错，兼容写法：

   btn.onclick = function(){
        var lic = document.createElement("li");
        var lis = document.getElementsByTagName("li");
        lic.innerHTML = txt.value;
        if(lis.length == 0){
            uls.appendChild(lic);
        }else{
            uls.insertBefore(lic,lis[0]);
        }
    }

14：removeChild（删除父元素中的子节点）

父级.removeChild(子节点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom9</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
    <ul id="uls">
        <li>jdjdjdjd<span>删除</span></li>
        <li>jdsdcsd<span>删除</span></li>
        <li>jdcsdsddjd<span>删除</span></li>
        <li>12123<span>删除</span></li>
        <li>343434jdjd<span>删除</span></li>
    </ul>
</body>
<script>
    var uls = document.getElementById("uls");
    var spans = document.getElementsByTagName("span");
    for(var i = 0; i<= spans.length; i++){
        spans[i].onclick = function(){
            uls.removeChild(this.parentNode);
        }
    }
    // removeChild 删除父元素中的子节点。
</script>
</html>

15：cloneNode（复制当前节点或复制当前节点及其子节点）

复制的节点.cloneNode(false) -->复制当前节点
复制的节点.cloneNode(true) -->复制当前节点及其子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            #box{
                width: 100px;
                height: 100px;
                background: red;
            　　　 }
            #div1{
                width: 200px;
                height: 200px;
                border: 5px solid #000;
           　　　 }
        </style>
</head>
<body>
    <div id="box">
        这个是box
    </div>
    <div id="div1">
        这个是div1
    </div>
    <input type="button" value="复制" id="btn" />
</body>
<script>
        var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var div1 = document.getElementById("div1");
    btn.onclick = function(){
        var clonbox = box.cloneNode(false);
        div1.appendChild(clonbox);
        // var clonbox1 = box.cloneNode(true);
               // div1.appendChild(clonbox1);
    }

16：replaceChild（替换当前父节点中的指定子节点）

父节点.replaceChild(新插入的节点，要替换的节点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换节点</title>
</head>
<body>
    <div id="main">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
    var main = document.getElementById("main");
    var spans = document.createElement("span");
    // replaceChild()方法替换节点
    // 参数一：新插入的节点；
    // 参数二：要替换的节点；
    // 父节点.replaceChild(新插入的节点，要替换的节点)
    main.replaceChild(spans,main.children[1])
</script>
</html>

先总结到这，后边再补充。。。

 

转载于:https://www.cnblogs.com/yingu/p/5080756.html

weixin_30437337
关注
javascript DOM 操作基础知识小结
12-11
JavaScript DOM（Document Object Model）是Web开发中用于处理HTML或XML文档的一种标准接口。它将文档结构转换为一棵由节点组成的树形结构，允许我们通过编程方式操纵网页内容。本篇将总结DOM操作的基础知识，重点...
javascript dom 基本操作小结
12-12
自己平时可能也会经常遇到所以总结如下： 1，dom元素的创建 2，dom元素的插入 3，dom元素替换 4，dom元素的删除 首先页面上有这么些简单的dom元素 ”wrap”> ”a”>aaaaaaaa</div> ”b”>bbbbbbbb</div> ”c”>...
DOM小结
somous_ly的专栏
08-04 449
dom - - -  Document Object Model (文档对象声明) HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换句话说咱们可以利用dom对HTML元素进行获取，修改，添加，删除等操作。 二.知识点小结 1.childNodes (该属性能返回当前节点的子节点列表) lang="en"> charset="UTF-8"
JavaScript DOM小结
weixin_33841503的博客
02-23 63
DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。 熟悉DOM对一个前端开发人员尤其重要，因此我根据红宝书也就是JavaScript高级程序设计制作成一个思维导图。可能会有一些漏点或者缺点，请您指出。 图片不够清晰，网盘链接: h...
javascript学习小结
greenHand176438的博客
10-07 1666
已经学了一段时间javaScript,在针对性的学习这块儿的时候，认为js就是属性、事件、方法，的混合使用。下面对js做个简单的总结。javascript又称js是一种用来交互的弱类型脚本语言，js大致分为以下几部分。 第一部分变量 在es6之前以var进行声明用来存储一个变化数据，可以用来做一个中转的容器方便以后的开发进行使用 变量的类型包括为以下几种： ...
JavaScript小结
weixin_44037272的博客
01-28 888
JavaScript 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，是一种被嵌入HTML网页之中的基于对象和事件驱动编程的脚本语言。脚本实际上是一段程序，用来完成某些特殊功能。JavaScript功能：1、可以将文本动态的放入HTML页面。2、可以对事件做出响应。3、可以读写HTML元素。4、可被用来验证用户输入的数据。5、可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。6、可被用来创建cookies，用来存储和取回位于访问者的计算机中的信息。
JavascriptDOM对象小结
NananananA' township
03-19 569
文档对象模型DOM（Document Object Mode）定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 例如： HTML代码分解DOM节点层次图： 元素节点：其中、、都是元素节点； 文本节点：向用户展示的内容，如中的Javascript、DOM、CSS等文本成为文本节点； 元素属性：元素的属性，如标签的链接属
JavaScript DOM 操作小结
winstar1688的专栏
01-08 360
document.createElement('div'); document.createTextNode('txt'); document.getElementById('idname'); document.getElementsByTagName('p'); document.getElementsByClassName(); appe
《JavaScript DOM 编程艺术》小结（一）
后乐的博客
05-08 828
《JavaScript DOM 编程艺术》（第2版）【 0501—0510 】 学习总结
JavaScript DOM
sandgss的博客
06-24 131
DOM 介绍  DOM(Document Object Model)：文档对象模型。  将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。 Element 元素的操作 Attribute 属性的操作 Text 文本的操作 DOM 小结DOM(Document Object Model)：文档对象模型 Document：文档对象、Element：元素对象、Attribute：属性对象、Text：文本对象  元素的操作 getElement
dom编程(小结)
YangWenYu_lala的博客
05-21 486
js的dom/注册事件的三种方式
JavaScript中 DOM操作方法小结
01-21
DM是(Document Object Model)的简称。 一.找元素 document.getElementById() 根据id选择器找，最多找一个； document.getElementsByName() 根据name找，找出的是数组；  document.getElementsByclassName()...
JavaScript学习笔记之DOM基础操作实例小结
12-08
在本文中，我们将深入探讨JavaScript DOM基础操作，主要包括子节点、节点类型、元素节点以及父节点的处理。 一、子节点操作 1. 获取子节点数量 在实例01中，我们通过`childNodes.length`获取了`<ul id="ul1">`元素...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 896
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 645
【代码】【JavaScript】LeetCode：707设计链表。
使用 uni-app 开发微信小程序的详细指南
最新发布
2301_79685859的博客
09-16 706
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 551
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 308
动态在本地引入图片
JavaScript DOM操作详解：子节点与节点类型
"JavaScript DOM基础操作实例讲解" 在JavaScript中，Document Object Model (DOM) 是一个表示HTML或XML文档的标准模型，它允许我们通过JavaScript来访问和操作文档中的元素和属性。这篇学习笔记主要介绍了DOM的基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值