webAPI节点查找

最新推荐文章于 2022-08-02 17:44:21 发布

VIP文章灯光下的投影

最新推荐文章于 2022-08-02 17:44:21 发布

阅读量329

点赞数

分类专栏： webAPIs 文章标签： webapi 节点和元素查找节点关系

本文链接：https://blog.csdn.net/liuyuhua666/article/details/89304456

版权

一、找对象

document.getElementById(id)（根据id获取元素元素：返回一个元素）；
document.getElementsByTagName(tagName)（根据标签名获取元素伪数组:返回一个数组对象，也就是伪数组）；
document.getElementsByClassName(className)（根据类名获取元素：返回一个伪数组）;
document.getElementsByName(name) (根据name属性获取元素，只适合表单元素:返回一个伪数组)；
document.querySelector(css选择器：css选择器， #id .className)（根据css选择器获取元素：返回值：单个元素）；
document.querySelectorAll(css选择器)（根据css选择器获取多个元素：返回值：伪数组）；

二、节点操作

节点关系
子节点和子元素：
-childNodes:所有的子节点
-children: 所有的子元素
-firstChild: 第一个子节点
-firstElementChild: 第一个子元素
-lastChild:最后一个子节点
-lastElementChild: 最后一个子元素

父节点：
-parentNode

兄弟节点和兄弟元素：
-previousSibling：上一个兄弟节点
-previousElementSibling：上一个兄弟元素
-nextSibling：下一个兄弟节点
-nextElementSibling：下一个兄弟元素
克隆节点
node.cloneNode（true）：
-在内存中克隆一份节点
-true: 深克隆，所有的额内容都克隆
-false:浅克隆，只会克隆标签
添加节点
parent.appendChild(child)：
-把child添加父元素的最后面
-参数：一个节点
删除节点
parent.removeChild(child)：
-把child从父元素删除
-参数：节点
创建元素
document.write()：
-把原来的页面覆盖
innerHTML：
-容易有性能问题
document.createElement(标签名)：
-在内存中动态创建一个元素
-设置内容
-添加到某个父元素

三、案例

1.祝愿墙

 <body>
<div id="content">
  <div class="tip1">
    <div class="tip_h" title="双击关闭纸条">
      <div class="num">第[49568]条 2016-02-17 22:51:52</div>
      <div class="close" title="关闭纸条">×</div>
      <div class="clr"></div>
    </div>
    <div class="tip_c">
      每天都要被自己给帅醒，希望以后越来越帅！！！
    </div>
    <div class="tip_f">
      <div class="icon">
        <img src="images/bpic_1.gif" alt="" tit

最低0.47元/天解锁文章

灯光下的投影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webAPI节点查找

一、找对象document.getElementById(id)（根据id获取元素元素：返回一个元素）；document.getElementsByTagName(tagName)（根据标签名获取元素伪数组:返回一个数组对象，也就是伪数组）；document.getElementsByClassName(className)（根据类名获取元素：返回一个伪数组）;document.getE...
复制链接

扫一扫