JavaScript学习6-文档对象模型基础

1.节点方法

节点对象方法（W3C DOM Level2）

方法 说明
appendChild(newChild) 添加子节点到当前节点的末端
cloneNode(deep) 获取当前节点的拷贝
hasChildNodes() 确定当前节点是否具有子节点(Boolean)
insertBefore(new,ref) 在一个子节点前面插入一个新的子节点
removeChild(old) 删除一个子节点
replaceChild(new,old) 使用新的子节点替换旧的
isSupported(feature,version) 确定节点是否支持特定功能

看看增删改的几个方法把

<html>

<head>

    <title>js_14.5</title>

    <script type="text/javascript">

      var newelement=document.createElement("p");

      newelement.id="newp";

      newelement.setAttribute("style","background:#ff0000");

      var newText=document.createTextNode("I am a new p");

      newelement.appendChild(newText);

      var parentElement;

      function load(){

        parentElement=document.getElementById("parentNode");

      }

      function callme(){

        alert("I am a new button");

      }

      function add(){

        parentElement.appendChild(newelement);

      }

      function insert(){

        var newinput=document.createElement("input");

        newinput.id="inputBtn";

        newinput.setAttribute("type","button");

        newinput.setAttribute("onclick","callme()");

        newinput.value="insert button";

        parentElement.appendChild(newinput);

      }

      function replace(){

        var newText=document.createElement("input");

        newText.id="newText1";

        newText.type="text";

        parentElement.replaceChild(newText,newelement)

      }

      function removeNode(){

        var oldText=document.getElementById("newText1");

        parentElement.removeChild(oldText);

      }

    </script>

</head>

<body onload="load()">

    <input type="button" name="AddBtn" value="Add" onclick="add()">

    <input type="button" name="InsertBtn" value="Insert" onclick="insert()">

    <input type="button" name="ReplaceBtn" value="Replace" onclick="replace()">

    <input type="button" name="RemoveBtn" value="Remove" onclick="removeNode()">

    <h3>node object method show</h3>

    <div id="showDiv">

        <p id="parentNode">this is parent node</p>

    </div>

</body>

</html>

JavaScript学习(6)-文档对象模型基础的更多相关文章

  1. JavaScript学习笔记1之基础知识点

    一.什么是JavaScrip JavaScript是一种动态类型.弱类型.基于原型的客户端脚本语言.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,在HTML网页 ...

  2. javascript之DOM文档对象模型编程的引入

    /* DOM(Document Object Model) 文档对象模型 一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的 对象进行描述,我们在浏览器上看 ...

  3. JavaScript笔记03——文档对象模型（Document Object Model，简称DOM）：获取HTML元素、操作HTML元素

    Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强.[1] DOM实际上是以面向对象方式描述的文档模型.DOM定 ...

  4. JavaScript学习（一）——基础知识查漏补缺

    标签script 我们知道,html要使用js就要使用<script>标签. 两种方式: 一是直接在<script>这里</script>写入代码. 二是在别的文件 ...

  5. 【JavaScript学习整理】js基础

    HTML,CSS属于标记语言, JavaScript是基于客户端的脚本语言. 变量: 语法  var 变量名 = value var是系统内部关键字,用来声明变量 变量名规则:  1.不能以数字开头  ...

  6. JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  7. JavaScript 引入方式 语言规范 语言基础 数据类型 常用方法 数组 if_else 比较运算符 for while 函数 函数的全局变量和局部变量 {Javascript学习}

    Javascript学习 JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript ...

  8. JavaScript学习(1)之JavaScript基础

    JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...

  9. JavaScript学习笔记（基础部分）

    一.JavaScript简介: 概念:JavaScript是一种解释性的.跨平台的.基于对象的脚本语言,一般用于客户端来给HTML页面增加动态的功能. 组成: 1.ECMAScript,描述了该语言的 ...

随机推荐

  1. swift 单例模式

    class ca{ ; static var instance:ca = ca(); class func GetInstance()->ca{ return instance; } } var ...

  2. CentOS下的强大的绘图工具 pinta

    [root@ok ~]# yum search pinta Loaded plugins: fastestmirror, refresh-packagekit, security Loading mi ...

  3. Git Manual / Git使用手册 / Git, GitLab, Git Bash, TortoiseGit （建议全文复制到Word文档中通过导航窗格查看）

    Git使用手册 目录 1     引言 2     Git.GitLab简介 2.1      Git 2.2      GitLab 2.3      Git基本概念 3     运行环境 4    ...

  4. Sphider + SCWS 打造完美PHP中文搜索引擎

    今日需要为几个网站做个全文搜索引擎,找了几个PHP开源项目,先试了一下Sphinx ,可惜是基于数据库的,相当于数据库搜索的扩展.Sphider还不错,不过中文的分词不行,基本只能靠空格和符号进行分词 ...

  5. widnows 使用WIN32 APi 实现修改另一打开程序的窗口显示方式

    1.GUI点击打开一个程序那边做一个判断. hwnd = 获取目标程序窗口句柄: if(hwnd == NULL /*不存在目标程序窗口句柄*/){     创建进程,打开目标程序: } else{ ...

  6. 【鉴别】日版iPhone如何通过IMEI查询运营商

    SoftBank.au.docomo是日本的三大运营商,以前日本不同运营商的iPhone在型号上进行区分,但iPhone5s/5c上三个运营商的型号都一致,所以无法在型号上对运营商进行区分,本文介绍通 ...

  7. Flashtext 使用文档 大规模数据清洗的利器-实现文本结构化

    1.1 安装 pip install flashtext 1.2 使用例子 1.2.1 关键字提取 >>> from flashtext import KeywordProcesso ...

  8. 设置open_cursors参数

    1.进入终端,输入命令:sqlplus /nolog 2.输入命令:conn /as sysdba 3.输入命令:alter system set open_cursors=1000 scope=me ...

  9. php代码检查

    最近写php,几个同事都是没写过c的,经常写的变量没有定义,而php没有编译,错误无法发现. 我们现在用的是NetBeans,好在其提供了语法检测,如下图,让编辑器强制显示我错误

  10. 网桥bridge

    1. 网桥基础 什么是网桥 网桥将多个网络在数据链路层连接起来.网桥的前身是集线器或中继器.网桥和集线器的区别:集线器上各端口都是共享同一条背板总线的,网桥的两个端口分别有一条独立的交换信道,不是共享 ...