JavaScript操作DOM的方法有哪些?


当前第2页 返回上一页

  三、文档结构

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

//(1)作为节点数的文档

    parentNode    //获取该节点的父节点  

    childNodes    //获取该节点的子节点数组

    firstChild    //获取该节点的第一个子节点

    lastChild    //获取该节点的最后一个子节点

    nextSibling    //获取该节点的下一个兄弟元素

    previoursSibling    //获取该节点的上一个兄弟元素

    nodeType    //节点的类型,9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点

    nodeVlue    //Text节点或Comment节点的文本内容

    nodeName    //元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示

    //注意,以上6个方法连元素节点也算一个节点

//(2)作为元素树的文档

    firstElementChild        //第一个子元素节点

    lastElementChild        //最后一个子元素节点

    nextElementSibling        //下一个兄弟元素节点

    previousElementSibling    //前一个兄弟元素节点

    childElementCount        //子元素节点个数量

    //注意,此5个方法文本节点不算进去

  四、javascript操作DOM

1

2

3

4

5

document.getElementById("img1").alt;       // 获取alt属性

document.getElementById("img1").src=""; //设置src属性

document.getElementById("img1").setAttribute("src", "1small.jpg");//非标准

document.getElementById("img1").getAttribute("class");//非标准

document.getElementsByClassName("cnblogs_code")[0].attributes;//返回节点的所有属性

  五、元素内容及节点创建

1

2

3

4

5

6

7

8

9

10

innerText、textContent //innerText与textContent的区别,当文本为空时,innerText是"",而textContent是undefined

innerHTML

document.createTextNode("<p>我是一个javascript新建的节点</p>");

document.createElement("p");//创建p节点

appendChild();    //将一个节点插入到调用节点的最后面

insertBefore();    //接受两个参数,第一个为待插入的节点,第二个指明在哪个节点前面,如果不传入第二个参数,则跟appendChild一样,放在最后。

removeChild();    //由父元素调用,删除一个子节点。注意是直接父元素调用,删除直接子元素才有效,删除孙子元素就没有效果了。

replaceChild();   //删除一个子节点,并用一个新节点代替它,第一个参数为新建的节点,第二个节点为被替换的节点

cloneNode();      //克隆节点,参数true

document.getElementById("div1").style.backgroundColor="#fff";

相关学习推荐:javascript视频教程

以上就是JavaScript操作DOM的方法有哪些?的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

javascript弹出框有哪些

javascript怎么移除属性

javascript如何显示和隐藏div

javascript如何定义变量

快速了解ui组件功能设计

javascript中删除数组元素的方法有哪些

javascript异步加载的详细介绍(附代码)

javascript怎么删除li

怎么使用javascript将对象转为字符串

typescript基础类型以及与javascript对比讲解

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...