DOM节点

作者: 蘑菇酱960903 | 来源:发表于2017-11-19 16:48 被阅读0次

document.createElement() //新建元素节点

document.createTextNode() //新建文本节点

elem.setAttribute(“filed”,"value") //设置元素属性

parent.appendChild(node); //在parent中添加子节点node

parent.insertBefore(newnode,existingNode) //在existingNode前添加newnode节点

parent.firstChild  //第一个子节点

parent.lastChild //最后一个子节点

parent.childNodes  //返回所有子节点(NodeList对象),在ie8-中子节点不包括文本节点,其他浏览器包括。

Node类型

Document类型

Element类型



Text类型

<div id="test">text</div>

console.log(test.nodeType); //3

console.log(test.nodeName);  //#text

console.log(test.nodeValue);  // text

console.log(test.parentNode);  //div

console.log(test.childNodes);  //[]

一、属性

1.nodeValue属性&data属性都可以访问Text文本中的值,这两个属性包含的值相同

console.log(test.nodeValue,test.data,test.nodeValue==test.data); //text text true

2.length  字符的数目

二、操作方法 [offset从0开始计算]

1.appendData(text)  在末端添加text到文本。

test.appendData(" add test");

console.log(test.nodeValue); //text add test

2.deleteData(offset,count)  从offset指定位置开始删除count个字符。

test.deleteData(1,1);

console.log(test.nodeValue);  //txt add test

3.insertData(offset,text)  从offset指定位置插入text。

test.insertData(1,"e");

console.log(test.nodeValue);  //text add test

4.replaceData(offset,count,text)  用text替换从offset指定位置到offset+count的文本。

test.replaceData(1,5," replaceText ");

console.log(test.nodeValue);  //t replaceText dd test

5.splitText(offset)  从offset指定的位置(不包括)将当地文本节点分成两个文本节点,父节点的文本节点增多一个。

console.log(test.splitText(5));   //laceText dd test

console.log(Test.childNodes);  //(2) [text, text]  text.data = t rep; text.data = t replaceText dd test;

6.substringData(offset,count)  提取从offset指定的位置开始到offset+count为止的字符串,原文本内容不会影响。

console.log(test.substringData(2,2));  //re

Comment类型

相关文章

  • js dom节点操作

    获取dom节点 新增dom节点 删除dom节点

  • 什么是dom树

    介绍DOM,以及对DOM分类和功能的说明。 DOM 节点:介绍DOM节点分类和节点层次。 介绍HTML DOM节点...

  • DOM和BOM的基础知识

    目录 js组成 DOMDOM是什么DOM节点是什么查找DOM节点,查看DOM节点的属性和样式添加DOM节点删除DO...

  • jS|DOM操作

    DOM节点的获取 DOM节点的创建 DOM节点删除 修改DOM元素 将指定两个DOM元素交换位置

  • DOM (javascript DOM节点操作)

    DOM (javascript DOM节点操作) 本节目录 查找DOM元素 DOM节点操作 javascript操...

  • jQuery-dom操作

    DOM节点的创建 jQuery节点创建与属性的处理 创建元素节点: 创建为属性节点: DOM节点的插入 DOM内部...

  • DOM(文档对象)、BOM(浏览器对象)

    DOM 获取DOM节点 DOM节点的property,修改对象属性,不会提现到html结构 DOM节点的attri...

  • js操作DOM

    创建dom 删除一个dom 文档碎片增快速度 dom节点 父节点 子节点 offsetParent 继续子节点 兄...

  • 15、DOM初识1

    DOM: Document Object Model (文档对象模型) DOM节点: 节点和节点层次的概念?节点:...

  • DOM和BOM一些基础用法

    DOM DOM常用节点类型 元素节点 - 1;属性节点 - 2;文本节点 - 3;注释节点 - 8;文档节点 - ...

网友评论

    本文标题:DOM节点

    本文链接:https://www.haomeiwen.com/subject/jxhpvxtx.html