childNodes，parentNode，offsetParent，firstChild，className

最新推荐文章于 2021-06-03 03:40:24 发布
最新推荐文章于 2021-06-03 03:40:24 发布
阅读量140 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42270374/article/details/97935696
版权 
  获取节点(包括空节点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--dom对页面进行操作-->
<!--children-->
<!--childNodes获取节点(包括空节点)-->
 <!--nodeType节点类型-->
<ul id="ul">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
<script>
    //IE6-8支持
    var oUl=document.getElementById('ul');
    // 获取节点的个数
    // alert(oUl.childNodes.length);
    for(var i=0;i<oUl.childNodes.length;i++){
        //IE7支持
        // oUl.childNodes[i].style.background="red";
        // nodeType==3 -> 文本节点
        //nodeType==1 ->元素节点
        // alert(oUl.childNodes[i].nodeType);
        // 高级浏览器支持
        if (oUl.childNodes[i].nodeType==1){
            oUl.childNodes[i].style.background="red";
        }

    }

第二种方法
    for(var i=0;i<oUl.children.length;i++){
        //只获取元素节点,任何浏览器下都支持
        //   alert(oUl.children.length)
            oUl.children[i].style.background="red";
    }
</script>
</html>
parentNode获取父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>嘻嘻嘻嘻<a href="javascript:;">隐藏</a></li>
    <li>哈哈哈哈<a href="JavaScript:;">隐藏</a></li>
    <li>咦咦咦咦<a href="JavaScript:;">隐藏</a></li>
    <li>嘤嘤嘤嘤<a href="JavaScript:;">隐藏</a></li>
</ul>
</body>
<script>
    var aA=document.getElementsByTagName('a');
    for (var i=0;i<aA.length;i++ ){
        aA[i].οnclick=function () {
            this.parentNode.style.display="none";
        };
    }
</script>
</html>
offsetParent获取父级定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{width: 400px;height: 400px;background: #ccc;margin: 100px auto;position: relative;}
        #div2{width: 280px;height: 280px;background: red;position: absolute;top: 60px;left: 60px;}
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>

</body>
<script>
    var oDiv2=document.getElementById("div2");
    alert(oDiv2.offsetParent);
</script>
</html>
firstChild获取第一个子节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ull">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
<script>
    var oUl=document.getElementById("ull");
    //IE6-8支持
    // oUl.firstChild.style.background="red";

    //高级浏览器
    // oUl.firstElementChild.style.background='red';

    //任何浏览器都支持
    if (oUl.firstElementChild) {
        oUl.firstElementChild.style.background='red';
    }else{
        oUl.firstChild.style.background="red";
    }

</script>
</html>

setAttribute()获取元素操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input  type="text"  id="txt1">
<input type="button" id="btn2" value="获取">
</body>
<script>
    var oTxt=document.getElementById('txt1');
    var oBtn=document.getElementById('btn2');
    oBtn.οnclick=function () {
        // oTxt.value='明天气温下降！';
        // oTxt['value']='明天气温下降！'
        oTxt.setAttribute('value','明天气温下降！');
    }
</script>
</html>
className选取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ull">
    <li class="box"></li>
    <li class="box"></li>
    <li></li>
    <li></li>
    <li class="box"></li>
    <li></li>
</ul>
</body>
<script>
    // 第一个参数用来决定是从哪儿父级下面选取元素
    // 第二参数所需要的东西，他的class映射
    function getByClass(oParent,sClass) {
        var aResult=[];//空数组，可以把每一个元素推到里面
        var aEle=oParent.getElementsByTagName('*');
        for (var i=0;i<aEle.length;i++) {
            if (aEle[i].className==sClass) {
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }
    var oUl=document.getElementById('ull');
    // var aLi=oUl.getElementsByTagName('li');
    // for (var i=0;i<aLi.length;i++){
    //     if (aLi[i].className=='box'){
    //         aLi[i].style.background="red";
    //     }
    // }
     var aBox=getByClass(oUl,'box');
      for (var i=0;i<aBox.length;i++){
          aBox[i].style.background='red';
      }
</script>
</html>

className的优势：
1.可以批量化的获取元素
2.具有选择性
3.当页面发生变化时，程序不会出错

如何用className选择元素
1.选择所有元素
2.通过className条件筛选

二.封装成函数
^smile
关注
js原生后代选择器_原生 JS 汇总
weixin_39825045的博客
12-19 1633
JS选取DOM元素的方法 注意：原生JS选取DOM元素比使用jQuery类库选取要快很多1、通过ID选取元素 document.getElementById('myid');2、通过CLASS选取元素 document.getElementsByClassName('myclass')[0];3、通过标签选取元素 document.getElementsByTagName('mydiv')[0];...
JavaScript页面操作笔记
青菜白玉堂的博客
02-28 225
DOM 获取节点 document.getElementById() document.getElementByClassName() document.getElementsByTagName() document.getElementsByName() document.querySelector() Node.parentNode() 当前节点的父节点 Node.nextSibling/p...
DOM-childNodes,parentNode,className,createElement,insertBefore,removeChild
weixin_33726313的博客
06-16 182
sha1、childNodes<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> </head> <scripttype="text/javascri...
firstChild, className,childNodes,parentNode的简单实用
wangangie10
07-05 230
　　function showmsg(obj) { document.getElementById("qxdt").background="images /JX2_630.jpg"; document.getElementById("qxdt").firstChild.classNa me="bz1"; document.getElementById("qsydt").background="i.
vue实现可拖拽列表组件
xiaobaige6084的博客
06-18 2360
列表内容和样式在外部自定义，话不多说，直接上代码 1. 用drag事件实现，唯一不好的是拖拽时的半透明框没法修改 <template> <divclass="list"ref="listRef1"@mousedown="drag"@mousemove='dragover'@mouseup='dragend'@mouseout="out"> <divclass="list-item"v-for="(item,index)inlistDat...
html 选择器 父节点,【JavaScript】JS获取子节点、父节点和兄弟节点的几种方式，附CSS组合选择器...
weixin_34901508的博客
06-03 1213
【一】、JS获取子节点的方式1，通过获取dom方式直接获取子节点1) document.getElementById("ID");2) document.getElementsByTagName("tagName")3)document.getElementsByClassName("className")4) document.getElementsByName("Name")5)docum...
DOM节点的属性和方法
zzzzz周绍辉的博客
07-13 1699
HTML DOM Element 对象HTML DOM 节点在 HTML DOM （文档对象模型）中，每个部分都是节点： 文档本身是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性是属性节点 HTML 元素内的文本是文本节点 注释是注释节点 Element 对象在 HTML DOM 中，Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释
html学习心得，我感觉很好
08-28
FIRSTCHILD 属性用于获取对象的 childNodes 集合的第一个子对象的引用。 26. FRAME 属性 FRAME 属性用于设置或获取表格周围的边框显示的方式。 27. HASMEDIA 属性 HASMEDIA 属性用于获取一个表明元素是否为 ...
parentNode、parentElement，childNodes、children 区别
MIR_zhang的博客
04-26 2309
parentElement 获取对象层次中的父对象。 parentNode 获取文档层次中的父对象。 childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。 children 获取作为对象直接后代的 DHTML 对象的集合。 parentNode和parentElement功能一样，childNodes和children功能一样。但是p...
parentElement\parentNode.parentNode.childNodes用法例子
zb0567的专栏
01-06 4171
offsetParent，parentNode,parentElement 区别  offsetParent  指与位置有关的上级元素  parentNode  指与位置无关的上级元素  parentElement 和 parentNode一样,但parentNode是W3C标准的parentElement 只在IE中可用.   第一种方法   New Docume
JavaScript获取指定classname的父节点
zmall博客
12-18 3837
//获取指定class的父节点 function getParents(element, className) { var that = this; var returnParentElement = null; function getParentNode(element, className) { if(that.isElement(element)) {
js实现添加className
weixin_30563319的博客
03-06 2022
obj.className =' '; //设置为新的obj.className +=' ';//在原来的后面加这个obj.classList.add(" "); //与第一个等价 <style>#side_btn {width: 15%;left: 0;bottom: 5%;}#side_nav {width: 25%;left: -34%;top: 15%;trans...
【实用总结】DOM节点className操作
dengrong8117的博客
12-13 240
经常用到的小工具函数，每次用到都重写一遍，有点浪费体力，于是决定分阶段整理下，需要用到的时候就直接拷过来用了～ 对于dom节点的className，常用操作不外乎增、删、查（改可以用增+删事先），由于代码比较简单，直接上源码+接口注释 /** * @description 给节点添加类 * @param {DOMObject} node dom节点 * @param ...
CPA 税法 基础班 第4章 税目与税率（2）+计税依据（1）.pdf
10-10
CPA 税法 基础班 第4章 税目与税率（2）+计税依据（1）.pdf
Jhipster7.9.3项目
最新发布
10-10
Jhipster
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值