码迷,mamicode.com
首页 > 其他好文 > 详细

Dom操作

时间:2019-08-23 19:26:31      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:i++   插入   append   insert   use   doc   NPU   取值   bsp   

把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.样式名(获取样式名的值)=样式值

 

Dom操作

标签:i++   插入   append   insert   use   doc   NPU   取值   bsp   

原文地址:https://www.cnblogs.com/zhai113/p/11383860.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!