Js dom操作总结

1.选取文档元素

1.1. getElemenById

基于唯一id获取,任何HTML元素可以有id属性,在文档中该值必须唯一。

1.2. getElementsByName

基于name属性的值选取HTML元素。

1.3. getElementsByTagName

通过标签名选取元素,document.getElementByTagName("div")

1.4. getElementsByClassName

通过css类选取元素

1.5. querySelectorAll()

终极的选取元素的办法,非常强大的技术,等效于jquery中的$()方法。

2.文档结构和遍历

2.1 遍历

parentNode,节点的父节点

childNodes, 只读的类数组对象,节点的子节点,注意:换行符也是一个子节点

firstChild,lastChild,  子节点的第一个和最后一个,注意:可能是换行,因为换行也是一个子节点

  nextSibling,previoursSibling, 节点的上一个兄弟节点和下一个兄弟节点

<html><head>test</head><body>Hello World!</body></html>
console.log(document.childNodes[0].childNodes[1]); //<body>Hello World!</body>
console.log(document.firstChild.firstChild.nextSibling); //<body>Hello World!</body>

2.2 属性

  HTML属性名不区分大小写,但js属性名大小写敏感,js属性名采用驼峰形式,其中class和for可以在html中作为属性,但是在js中为关键字,所以在js中变为className和htmlFor

<body>
<div id="div3" class="test" >3333333333</div>
<script>
document.getElementById("div3").className //test
document.getElementsByClassName("test")[0].id //div3
</script>
</body>

2.3 创建节点

var s = document.createElement("script");
s.url = "www.baidu.com";

2.4 插入节点

  appendChild()是在需要插入的element节点上调用,参数为被插入的节点,将被插入节点插入到调用节点的尾部

<div id="app" class="test" >
<div>hello</div>
</div>
<script>
var p = document.createElement("p");
p.innerText = "world";
document.getElementById("app").appendChild(p);
</script> //将p插入到<div>hello</div>后

  insertBefore()第一个参数是待插入节点,第二个是已经存在的节点,新节点插入到该节点的前面。方法是在新节点的父节点上调用,方法的第二个参数必须为该父节点的子节点

<body>
<div id="app" class="test" >
<div id="app1">hello</div>
</div>
<script>
var p = document.createElement("p");
p.innerText = "world";
document.getElementById("app").insertBefore(p, document.getElementById("app1"));
</script> //在app1前插入

2.5 删除和替换

  removeChild()和replaceChild()的语法和insertBefore()的语法一致

上一篇:python列表和元组操作


下一篇:java集合框架图