一、节点操作

  常用的节点主要为document和element,上一篇内容我们讲述了节点的查找和节点属性的操作,本节则主要列述节点本身的创建、增加、删除、替换等操作。

1、创建节点

  通过如下语法可以创建一个元素标签,可以对创建的元素标签进行赋值操作和属性操作,应用实例如下:

var ele_img=document.createElement("img");                                          //创建节点对象ele_img,为img标签元素
ele_img.src="meinv.jpg";                                                            //标签属性的赋值操作,也可以通过原生JS的方式进行
ele_img.height="400";
ele_img.width="250";

2、增加节点

  增加节点操作首先需要找到一个父级节点,对父级节点进行增加节点操作,因为增加节点时需要有新的节点对象,即待被增加的节点标签,故其通常和创建节点一起使用,应用实例如下:

var ele_outer=document.getElementsByClassName("outer")[0];                         //获得一个父级节点ele_outer
var ele_append=document.getElementsByClassName("append")[0];                       //通过绑定事件形式触发增加节点
ele_append.οnclick=function () {var ele_img=document.createElement("img");                                 //创建待插节点ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.appendChild(ele_img)                                             //追加节点,会将节点追加在最后};

  上述append节点的方式会把增加的节点追加在父级节点中所有子标签的最后面,如果需要指定增加位置,需要用insertchild的方式,此时需要指定一个已存在的子标签,实例如下:

var ele_outer=document.getElementsByClassName("outer")[0];                         //获得一个父级节点
var ele_p=document.getElementsByTagName("p")[0];                                   //获得父级节点下的一个子节点,作为插入节点参考节点
var ele_append=document.getElementsByClassName("append")[0];
ele_append.οnclick=function () {var ele_img=document.createElement("img");                                 //创建待插节点ele_img.src="meinv.jpg";ele_img.height="400";ele_img.width="250";ele_outer.insertBefore(ele_img,ele_p)                                      //插入节点,语法顺序为:(待插入节点,参考节点)};

3、删除节点

  同样删除节点也是需要指定父级节点,通过移除其某个子级元素的方式将某个子级元素进行删除,具体实例如下:

var ele_outer=document.getElementsByClassName("outer")[0];                                //获得一个父级节点对象
var ele_p=document.getElementsByTagName("p")[0];                                          //获得父级标签下的一个子级节点对象
var ele_delete=document.getElementsByClassName("delete")[0];
ele_delete.οnclick=function () {ele_outer.removeChild(ele_p)                                                      //删除节点};

4、节点替换

  节点替换也是需要找到一个父级节点,对节点下的某本来存在的个子标签进行替换,当然还需创建一个新替换标签,替换掉需要被替换的元素,具体应用实例如下:

var ele_outer=document.getElementsByClassName("outer")[0];                               //获得一个父级节点对象
var ele_p=document.getElementsByTagName("p")[0];                                         //获得父级节点下一个需要被替换的子节点对象
var ele_replace=document.getElementsByClassName("replace")[0];
ele_replace.οnclick=function (){var ele_h1=document.createElement("h1");                                         //创建一个新替换对象ele_h1.innerText="美女系列";ele_outer.replaceChild(ele_h1,ele_p)                                             //替换节点,语法顺序为(新替换节点,旧被替换节点)}        

5、复制节点

  具体实例如下:

var ele_outer=document.getElementsByClassName("outer")[0];
var ele_copy=ele_outer .cloneNode();console.log(ele_copy)                                                    //结果即为outer父级标签,不包含任何子标签
var ele_copy=ele_outer .cloneNode(true);console.log(ele_copy)                                                    //结果为outer父级标签,包含所有子标签

转载于:https://www.cnblogs.com/liuduo/p/7832940.html

Python Day56-57 js相关推荐

  1. 在python中调用js或者nodejs要使用PyExecJs第三方包。

    在python中调用js或者nodejs要使用PyExecJs第三方包. 使用时:import execjs 这是没有用到nodejs的情况:如果用到nodejs,这种写法会报"Cannot ...

  2. python爬虫执行js代码_爬虫之python3用execjs执行JS代码

    JS运行环境 Node.js 是Javascript语言服务器端运行环境 测试运行 测试运行JavaScript程序 微软windows操作系统:附件-命令提示符 需进入到js程序的目录下,node命 ...

  3. python分配buffer_Node.js中的buffer如何和python中的buffer相对应

    我的整个需求可以分解为下面几步: step1.Node.js发送Buffer类型数据: 因为Node.js中fs文件系统读取文件后的回掉中均返回的为Buffer类型的数据, 直接通过queryStri ...

  4. Python之调用JS的方式

    一.前言 日常 Web 端爬虫过程中,经常会遇到参数被加密的场景,因此,我们需要分析网页源代码.通过调式,然后一层一层剥离出关键的 JS 代码,使用 Python 去执行这段代码,得出参数加密前后的 ...

  5. 为什么中国这么多高薪程序员,开发不出Java, Typescript, Python, Rust, Node.js这些基础设施?...

    近日,有人在网上问了这个问题,引起了网友热议: 为什么中国这么多高薪程序员,开发不出Java,Typescript, Python, Rust, Node.js这些基础设施? 对这个问题,大家从不同角 ...

  6. vue.js python_使用Python和Vue.js自动化报告过程

    vue.js python If your organization does not have a data visualization solution like Tableau or Power ...

  7. python aes padding_使用PKCS7Padding在python和Node.js之间进行AES加密

    已解决 密码学Python 使用PKCS7Padding在python和Node.js之间进行AES加密10 我试图用Node.js中的pkcs7填充来解密消息没有成功. 此消息已加密并从Python ...

  8. 网易云音乐python爬虫(Js破解)

    网易云音乐下载python爬虫(Js破解) 最近做了一个网易云音乐下载的python爬虫,功能就是输入歌曲的名字,程序自动下载网易音乐搜索界面的第一首歌(一般都是原唱排第一位).本文很适合小白学习,写 ...

  9. Python爬虫之Js逆向案例(2)-某乎搜索

    Python爬虫之Js逆向案例(2)-知乎搜索 声明:某乎加密逆向分析仅用于研究和学习 大家好,今天继续分享关于某乎关键词搜索接口为案例的Js逆向实战.如果你是一名新手,而且还没有来得及看上一篇< ...

  10. 树莓派利用python控制57步进电机

    一.57步进电机参数 二.树莓派利用python控制57步进电机 import RPi.GPIO as GPIO import time# w1,w2,w3,w4,w5,w6 = 0,1,0,0,0, ...

最新文章

  1. ​20210716未来智能实验室收录资料
  2. 处理器与内存和硬盘的交互
  3. 常见设备分辨率大小,响应式必备啊
  4. OpenCL memory object 之 Global memory (2)
  5. Ghost安装之后,键盘出现字符出现乱码
  6. 黑科技DeepFake检测方法:利用心跳做信号,还能「揪出」造假模型
  7. 来,看我是如何把面试官问倒的!
  8. 《初级会计电算化应用教程(金蝶KIS专业版)》——导读
  9. ask调制流程图_FSK、MSK、ASK调制方式自动识别模块分析设计
  10. 爱了爱了!从草根到百万年薪程序员的十年风雨之路,小白也能看明白
  11. 性能指标TP99介绍
  12. linux:常用命令
  13. docker 启动失败:specified both as a flag and in the configuration fir/daemon.json
  14. 移动通信中的信道编码基础
  15. Java利用JNA调用C#的dll
  16. 函数指针的强制类型转换与void指针
  17. Flashback archive
  18. Linux/Centos安装oracle11超详细图文教程
  19. 电子驻车系统(拉索式)
  20. android四大组件之四-BroadCast实现原理分析

热门文章

  1. 就产品测试问题又吵架了
  2. Error:Failed to open zip file. Re-download dependencies and sync project
  3. 要人帮忙,电脑怎么不寄过来?
  4. 如果我是决策者,我会决策做CPU吗?
  5. Function语意学之Member的各种调用方式
  6. android 绕过动态权限,android绕过permission验证及fork进程权限提升
  7. android 高德amap开发二(地图操作)
  8. @param注解什么意思_你对Java注解真的理解吗?
  9. php 两位小数 00,php保存两位小数的几种要领引见_后端开发
  10. java数据结构编程问题_Java语言程序设计与数据结构第十一版(基础篇)第一章编程练习题答案...