JavaScript如何对DOM进行操作

这篇文章运用简单易懂的例子给大家介绍JavaScript如何对DOM进行操作,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

成都创新互联公司2013年至今,是专业互联网技术服务公司,拥有项目做网站、网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元宜丰做网站,已为上家服务,为宜丰各地企业和个人服务,联系电话:18982081108

JavaScript操作DOM的方法有:1、获取节点,代码为【document.getElementById();】;2、css选择器,代码为【document.querySelector()】;3、文档结构,代码为【parentNod】。

一、获取节点

document.getElementById();//id=""
document.getElementsByName();//name=""
document.getElementsByTagName();//"input"
document.getElementsByClassName();//class=""

二、css选择器

document.querySelector();//根据css选择器规则返回第一个匹配到的元素,"#div1>p"
document.querySelectorAll();//返回所有匹配到的元素

三、文档结构

//(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

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;//返回节点的所有属性

五、元素内容及节点创建

innerText、textContent //innerText与textContent的区别,当文本为空时,innerText是"",而textContent是undefined
innerHTML
document.createTextNode("

我是一个javascript新建的节点

"); document.createElement("p");//创建p节点 appendChild(); //将一个节点插入到调用节点的最后面 insertBefore(); //接受两个参数,第一个为待插入的节点,第二个指明在哪个节点前面,如果不传入第二个参数,则跟appendChild一样,放在最后。 removeChild(); //由父元素调用,删除一个子节点。注意是直接父元素调用,删除直接子元素才有效,删除孙子元素就没有效果了。 replaceChild(); //删除一个子节点,并用一个新节点代替它,第一个参数为新建的节点,第二个节点为被替换的节点 cloneNode(); //克隆节点,参数true document.getElementById("div1").style.backgroundColor="#fff";

关于JavaScript如何对DOM进行操作就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


分享题目:JavaScript如何对DOM进行操作
分享URL:http://scyanting.com/article/pjihsj.html