DOM学习笔记

最新推荐文章于 2024-08-30 11:12:09 发布
最新推荐文章于 2024-08-30 11:12:09 发布
阅读量394 收藏
点赞数
分类专栏： java script 文章标签： function xhtml div header html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jimung/article/details/2292826
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DOM Test</title>
    <script type="text/javascript">
    function Remove(num)
    {
        var pElement = document.getElementById("nav");
        var cElement = pElement.getElementsByTagName("li")[num];
        pElement.removeChild(cElement);
    }
    function Add(num)
    {
        var pElement = document.getElementById("nav");
        var beforeNode = pElement.getElementsByTagName("li")[num];
        var addNode = document.createElement("li");
        pElement.insertBefore(addNode,beforeNode);
    }
    function AddStrongNode(num)
    {
        var pElement = document.getElementById("nav");
        var createElement = document.createElement("strong");
       
        createElement.appendChild(document.createTextNode("Home"));
       
        pElement.childNodes.item(num).appendChild(createElement);
        var addNode = document.createElement("li");
        pElement.insertBefore(addNode,beforeNode);
    }
    function ReplaceFirst(num)
    {
        var pElement = document.getElementById("nav");
        var createElement = document.createElement("li");
        createElement.appendChild(document.createTextNode("ReplaceFirst"));
       
        pElement.replaceChild(createElement,pElement.firstChild);
    }
    function ReplaceLast(num)
    {
        var pElement = document.getElementById("nav");
        var createElement = document.createElement("li");
        createElement.appendChild(document.createTextNode("ReplaceLast"));
       
        pElement.replaceChild(createElement,pElement.lastChild);
    }
    function CloneNode(num)
    {
        var pElement = document.getElementById("nav");
        var clonedNode = pElement.getElementsByTagName("li")[parseInt(num,10)];

        var dolly = clonedNode.cloneNode(true);
        pElement.insertBefore(dolly,clonedNode);
    }
    function CloneNextNode(num)
    {
        var pElement = document.getElementById("nav");
        var clonedNode = pElement.getElementsByTagName("li")[parseInt(num,10)];
        var nextNode = clonedNode.nextSibling;

        var dolly = nextNode.cloneNode(true);
        pElement.insertBefore(dolly,nextNode);
    }
    function ClonePreviousNode(num)
    {
        var pElement = document.getElementById("nav");
        var clonedNode = pElement.getElementsByTagName("li")[parseInt(num,10)];
        var nextNode = clonedNode.previousSibling;

        var dolly = nextNode.cloneNode(true);
        pElement.insertBefore(dolly,nextNode);
    }
    function Parent()
    {
        var pElement = document.getElementById("nav");
        var cNode = pElement.getElementsByTagName("li")[3];
        var pNode = cNode.parentNode;
       
        alert("Node Value:"+pNode.nodeValue+"/nNode Name:"+pNode.nodeName+"/nNode Type:"+pNode.nodeType);
    }
    </script>
</head>
<body>
<div id="MyPage">
    <div id="header">
        <img alt="Logo" src="Images/logo.gif" />
    </div>
    <div id="navigation">
        <ul id="nav">
            <li><strong>Home</strong></li>
            <li><a href="#">Artichles</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="Remove">
        <ul id="removeNav">
            <li>
                <a href="#" οnclick="Remove(0);">Remove Node</a>&nbsp|
                <a href="#" οnclick="Add(0);">ADD Node</a>&nbsp|
               
            </li>
            <li>
                <a href="#" οnclick="ReplaceFirst();">Replace First Node</a>&nbsp|
                <a href="#" οnclick="ReplaceLast();">Replace Last Node</a>&nbsp
            </li>
            <li>
                <a href="#" οnclick="AddStrongNode(0);">ADD Strong Node In First Node</a>
            </li>
            <li>
                <a href="#" οnclick="CloneNode(1);">Clone Node</a>&nbsp|
                <a href="#" οnclick="CloneNextNode(1);">Clone Next Node</a>&nbsp|
                <a href="#" οnclick="ClonePreviousNode(1);">Clone Previous Node</a>
            </li>
            <li>
                <a href="#" οnclick="Parent();">Parent Node</a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

这是前几天做的一些小练习,DOM高手,请多多赐教

jimung
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
虚拟浏览器 JSDOM 学习笔记
软件哲学
09-24 3409
这篇文章只是个人学习笔记，所以结构不清，信息不全，建议阅读原版项目手册。   JSDOM 是用nodejs实现的用于测试的虚拟浏览器。 基本例子 const dom = new JSDOM(``, { url: "https://example.org/", referrer: "https://example.com/", contentType: "text/html",...
JavaScript HTML DOM学习笔记.emmx
02-11
从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走
JavaScript DOM 学习笔记
幸愉编程·信奥编程私教1v1
02-21 977
DOM学习笔记
HTML DOM学习笔记
Saurfang
07-27 415
  DOM 是Document Object Model( 文档对象模型 )的缩写。  DOM是把html里面的各种数据当作对象进行操作的一种思路。 (面向对象的角度看html的标签) 节点概念 DOM把所有的html都转换为节点 整个文档 是一个节点 元素 是节点 元素属性 是节点 元素内容 是节点 注释 也是节点    获取节点 document.getElementById ...
Part1-DOM学习笔记-DOM基础操作
m0_63165331的博客
08-07 851
本文是个人的DOM基础学习笔记系列，内含大量示例代码，对初学者会有所帮助。
dom学习笔记整理
weixin_51109349的博客
06-10 1056
DOM1.DOM1.1什么是DOM2.DOM树2.1DOM树是什么3.获取元素的方法3.1通过id3.2通过class名3.3通过TagName3.4通过name3.5通过css选择器选择一个3.6通过css选择器选择多个4.节点4.1 节点的分类4.1.1 文档节点4.1.2 元素节点4.1.3 属性节点4.1.4 文本节点4.2 节点的三个属性4.2.1 nodeType（节点类型）4.2.2nodeName（节点名称）4.2.3nodeValue（节点值） 1.DOM 1.1什么是DOM DOM就是文
JS+DOM编程学习笔记
qq_42192672的博客
01-18 257
总算是把这本书过了一遍，最后还仿照树上做了个小的web前端网站，分享一下收货 链接：https://github.com/woaixiaoyuyu/Web-front-end/tree/master/JavaScript-DOM-_/JS_DOM_JSD...
JavaScript HTML DOM学习笔记
xuepan1994的博客
07-26 773
JavaScript HTML DOM学习笔记以及动态添加table表格的内容方法
JavaScript 之 DOM 学习笔记
qq_52271364的博客
10-24 456
JavaScript中DOM介绍
DOM学习笔记（二）
zhenyu5665的博客
05-03 9033
盒子模型 盒子模型属性 在JS中通过相关属性可以获取（设置）元素的样式 信息，这些属性就是盒子模型属性（基本上都是有关样式的） client clientTop/ clientLeft： 获取当前元素上 / 左边框的宽度 clientWidth/ clientHeight： 获取当前元素可视区域的宽高（包括padding），和内容溢出无关，就是我们自己设置的宽高+padding 获取当前页面...
js DOM学习笔记11
08-08
JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...
JavaScript高级程序设计 DOM学习笔记
10-28
根据给定的文件信息，以下是关于JavaScript中DOM（文档对象模型）的相关知识点详解： DOM是文档对象模型（Document Object Model）的缩写，它是一个跨平台的接口，由W3C组织制定标准，用于在HTML或XML文档中创建和...
JS基本功DOM学习笔记
07-12
在JS基本功DOM学习笔记中，我们将深入探讨以下几个核心知识点： 1. **DOM树**：DOM将网页内容表示为一棵由节点构成的树形结构，其中每个节点代表HTML元素、属性、文本等。根节点通常是`document`，其他节点如`<div>...
比较详细的javascript DOM 学习笔记第1/2页
12-08
本篇学习笔记主要探讨了DOM的基础知识，包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**：作为整个文档的顶级节点，它包含了文档的全部内容。 - **DocumentType**：表示文档...
Javascrp中几个常用的字符串验证
伟大的饺子
04-11 542
var reIp = /^([01]?/d{1,2}|2[0-4]/d|25[0-5])(/.([01]?/d{1,2}|2[0-4]/d|25[0-5])){3}$/; //IPvar reEml = /^[/w/-/.]+@[a-z0-9]+(/-[a-z0-9]+)?(/.[a-z0-9]+(/-[a-z0-9]+)?)*/.[a-z]{2,4}$/i; //E-mailvar reTel
使用itextpdf5.x将网页转为PDF,并添页眉页脚页码
qingqingzijinxin的专栏
08-23 335
itextpdf，html转pdf
HTML ＜template＞ 标签的基本技巧
最新发布
ufrontend的博客
08-30 373
HTML中的标记是 Web 开发中一个功能强大但经常未得到充分利用的元素。它允许你定义可重复使用的内容，这些内容可以克隆并插入 DOM 中而无需最初渲染。此功能对于创建动态、交互式 Web 应用程序特别有用。在本文中，我们将探讨有效使用 标记的 10 个基本技巧，帮助你在项目中充分发挥其潜力。1. 了解 标记的基础知识 标记是一个 HTML 元素，它包含页面加载时不会渲染的客户端内容。
JavaScript DOM学习笔记：基础与节点解析
"这是一份关于JavaScript DOM学习的详细笔记，涵盖了DOM基础和一些主要的节点类型。笔记内容包括对各种节点对象的解释，如Document、Element、Text、Comment等，并提到了getElementsByTagName()方法的使用。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值