Dom操作

Posted 2022-08-17 zhai113

把html 把标签内容划分为各种节点：

                   文档节点（document）-------------body

                   元素节点-------------标签

                   文本节点-------------内容

                   属性节点

                   注释节点

获取元素节点（标签）

         通过id获取

                  var username = document.getElementById(‘user‘).value;

         通过标签来获取单个值

                  var username = document.getElementByTagName（‘input‘)[0].value;

         通过标签来获取多个值

                   var username = document.getElementByTagName（‘input‘)；

                            for（var I = 0;i< username.length;i++）

                                                                                             alert(username[i].value;

                                                                                            

         通过name属性获取单个

                   var username = document.getElementsByName(‘x‘)[0].value;

         通过name属性获取多个     

                   var username = document.getElementsByName(‘x‘);

                   for（var I = 0;i< username.length;i++）

                                                                                             alert(username[i].value;

                                                                                            

 

　　收集的元素都以字符串的形式返回

 

获取文本节点（Nodes：节点）

　　获取 document. getElement

 

　　DOM节点添加和删除

　　　　createElement                 创建新的节点

　　　　appendChild(newNode)           将newNode添加成当前节点的最后一个子节点

　　　　insertBefore(newNode,refNode)    将refNode节点之前插入newNode节点

　　　　replaceChild(newNode,oldNode)    将oldNode节点替换成newNode节点

　　　　removeChild(oldNode)             将oldNode子节点删除

 

　　复制节点    .cloneNode（true false）

　　var element=city.firstChild.nextSibling.cloneNode(true);

                 　　 city.appendChild(element);

　　默认 加到最后一行

 

 

操作内容

         表单：

                   赋值：标签对象.value=””；

                   取值：标签对象.value

         非表单：

                   取值：

                   innerHTML： 返回的是标签内的html内容，包含html标签

                   innerText ：返回的是标签内的文本值，不包含html标签

操作属性

　　获取属性值

         　　标签对象.getAttribute（’属性名’）  这是一个return返回值

　　设置属性名和属性值

　　标签对象.setAttribute(‘属性名‘,‘属性值‘)

　　删除属性

　　标签对象.removeAttribute(‘属性名‘)

　　操作样式（只操作内联 也就是行内）

　　标签对象.style.样式名（获取样式名的值）

　　标签对象.style.样式名（获取样式名的值）=样式值