博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js获取节点
阅读量:6504 次
发布时间:2019-06-24

本文共 1640 字,大约阅读时间需要 5 分钟。

hot3.png

DOM:文档对象模型,代表整个HTML页面

▼获取窗口大小:

  document.documentElement.clientWidth/clientHeight    ○获取当前窗口宽/高,IE与DOM均可使用
  document.body.clientWidth/clientHeight               ○body对象宽/高
  document.body.offsetWidth/Height                     ○视口(不是窗口,显示HTML页的区域)大小

▼获取节点:  IE某些节点只能通过name属性值获取,所以最好id与name都写出来,且值一样

             注:  节点调用get方法,便相对定位于该节点,只在该节点上下查找相关节点

  document.getElementByIdx("节点id");           ○根据节点id获取节点,返回节点对象

  document.getElementsByTagName_r("标签名");     ○根据标签名,获取该标签表示的节点对象数组
  doucment.getElementsByName("name属性值");    ○根据name属性值,获取该值表示节点的对象数组.如radio单选框
                                                 附:  radio的checked属性,选中返回true,否则false

▼节点属性:    var node=document.getElementByIdx("??");

  node.nodeName     ○节点标签名    如:HTML/BODY/DIV/#text(文本节点名)

  node.nodeType     ○节点类型      1(元素结点) 3(文本结点)
  node.nodue    ○节点文本内容  文本结点返回文本内容(文本内容是文本结点一个属性),元素结点返回null
  node.属性名       ○获取节点指定属性值
  node.属性名="?";  ○给节点指定属性重新赋值
  node.getAttribute("属性名")/setAttribute("属性名","属性值")    ○获取/重置属性值,但某些浏览器不支持,建议不用

  node.parentNode              ○获取父节点

  node.childNodes              ○获取子节点,返回子节点数组
  node.childNodes[i]           ○直接获取该节点下第i个子节点
  node.firstChile/lastChild    ○获取该节点下第1个/最后1个子节点
  node.previousSibling/nextSibling    ○获取同属一父节点下,该节点的上/下一节点

▼节点方法:  var ul=document.getElementByIdx("ul.id");    ○以一个ul无序列表为例

  var li=document.createElement("标签名(如li)");       ○创建一个指定标签类型的节点

  var te=documnet.createTextNode("文本内容");          ○创建一个文本节点

  ul.appendChild(li);    ○在ul中追加一个li子节点

  ul.insertBefore(li,ul.firstChild);    ○在第2个参数指定节点前插入第1个参数表示的节点

  var _li=li.clone();    ○克隆一个新节点.浅层克隆,不能克隆节点下面子节点,clone(true)则完全克隆

  ul.removeChild(子节点);    ○删除该节点下子节点,如果没有该子节点,则会报错

  ul.hasChildNodes();        ○判断该节点下是否存在子节点.存在返回ture,否则false

▼innerHTML:  MS提出的,所有浏览器支持,但IE的table,select不支持

  node.innerHTML="html代码";     ○向指定节点开闭标签内填入html代码,然后被执行

  node.innerHTML+="html代码";    ○若重复执行上面代码,会发生覆盖.+=则实现追加

转载于:https://my.oschina.net/meSpace/blog/90413

你可能感兴趣的文章
HTML5:理解head
查看>>
oracle
查看>>
java SpringUtil获取bean
查看>>
Centos6.4最小化安装系统初始化脚本
查看>>
PaaS变厚了
查看>>
赛门铁克开启“容灾即服务”时代
查看>>
复杂度归纳--小结
查看>>
PHP学习笔记 第八讲 Mysql.简介和创建新的数据库
查看>>
js获取鼠标位置
查看>>
Mysql
查看>>
跨越企业的“中等收入陷阱”
查看>>
Android 开发者必知的开发资源
查看>>
软件工程技术基础-(软件复用技术)
查看>>
给django视图类添加装饰器
查看>>
【Project Euler】530 GCD of Divisors 莫比乌斯反演
查看>>
luogu P1280 尼克的任务 序列DP
查看>>
sys.check_constraints
查看>>
vue问题
查看>>
Python变量类型(l整型,长整形,浮点型,复数,列表,元组,字典)学习
查看>>
解决方案(.sln)文件
查看>>