javascript基础--DOM选取子节点

最新推荐文章于 2022-07-14 19:27:10 发布
最新推荐文章于 2022-07-14 19:27:10 发布
阅读量192 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Mr-W/p/6485319.html
版权

一、节点选取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // 首尾子节点有兼容性问题
        // firstChild           firstElementChild
        // lastChild            lastElementChild
        // 兄弟节点
        // nextSlibing          nextElementChild
        // previousSibling      previousElementsSibling
        window.onload = function() {
            var oLi = document.getElementById('li1');
            var oPre = oLi.previousElementSibling || oLi.previousSibling;
            oPre.style.background = "red";
        }
    </script>
</head>

<body>
    <ul id="ul1">
        <li></li>
        <li id="li1"></li>
        <li></li>
    </ul>
</body>

</html>

 二、dom节点childNodes和nodeType

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function() {
            var oUl = document.getElementById('ul1');
            // alert(oUl.childNodes[1].nodeType);
            var i = 0;
            for (i = 0; i < oUl.childNodes.length; i++) {
                if (oUl.childNodes[i].nodeType == 1) { //1是指标签节点  3是指文本节点
                    oUl.childNodes[i].style.background = 'red';
                }
            }
        }
    </script>
</head>

<body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>

</html>

 三、children是没有兼容问题的childNodes

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function() {
            var oUl = document.getElementById('ul1');
            // alert(oUl.children.length);
            var i = 0;
            for (i = 0; i < oUl.children.length; i++) {
                oUl.children[i].style.background = 'red';
            }
        }
    </script>
</head>

<body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>

</html>

 

转载于:https://www.cnblogs.com/Mr-W/p/6485319.html

Z19871124123456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
子节点 和 js 选择和jquery选择
softuse的博客
07-28 1234
function dom() { var s= document.getElementById("test"); del_ff(s);    //清理空格 var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得s的下一个兄弟节点 var ps
DOM方法
xuxunjy的博客
09-14 228
获取当前元素的子节点 通过具体的元素节点调用 元素不包括字符，节点包括空格和字符 元素是标签之类的， ​ 1.getElementsByTagName() ​ -方法，返回当前节点的指定标签名后代节点 ​ 2.childNodes ​ -属性，表示当前节点的所有子节点 ​ 3.firstChild ​ -属性，表示当前节点的第一个子节点 ​ 4.lastChild ​ -属性，表示当前节点的最后一个子节点 ​ 5.children ​ 属性可以获取当前元素的所有子元素 ​ 6.firstEle
js选择子节点
weixin_30894583的博客
08-26 408
<script> 　　//获取子节点个数　　　var oul=document.getElementsByTagName('ul')　　　alert(oul[0].children.length); 　　//选取子节点二　　for(var i=0;i<oul[0].childNodes.length;i++){　　　　　　if(oul[0].childNodes...
js获取子节点的方法
Utopian_x的博客
09-20 2万+
1、通过获取DOM方式直接获取子节点 其中price为父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候按数组的形式访问即可，如vara=document.getElementById("price").getElementsByTagName("div")[0] 返回的是数组里面的第一个元素。 vara=document.getElementById("price").getElementsByTagName("div"...
dom获取节点（子节点、兄弟节点、父节点）
张木期的博客
07-16 1万+
今天在做一个项目拿兄弟节点的事，刚开始拿不到，后来网上查了一下，于是 便找到方法了，下面把我的问题写出来，话不多说直接上问题， 遇到的问题是我要通过点击删除按钮删除这一行数据，后端给的接口要传的参数就是设备编号（imei），重点是这个列表本身也是动态的数据，用框架渲染出来的，然后就想到了用dom节点来删除，还算比较简单， 我要获取的就是imei，然后通过ajxa调用接口删除，完美实现，下面是源码...
JavaScript HTML DOM元素 节点操作汇总
10-16
然后，`appendChild()`方法将新节点添加到现有节点的末尾，或者使用`insertBefore()`在指定子节点之前插入新节点。例如： ```javascript var para = document.createElement("p"); var node = document....
Desafio-usando-el-Dom
02-14
2. **遍历元素**：使用`childNodes`, `children`, `nextSibling`, `previousSibling`等属性可以遍历元素及其子节点。 3. **创建元素**：`document.createElement()`用于创建新的HTML元素，`appendChild()`, `...
shopList-learning-js-DOM
04-19
`getElementById`、`getElementsByClassName`、`getElementsByTagName`等方法用于选取元素，`appendChild`、`removeChild`用于操作元素的子节点。`innerHTML`和`textContent`属性用于设置或获取元素内容。 5. **...
02-DOM_DOM_
10-04
节点之间通过父节点-子节点的关系相互连接，形成了一个层次结构。例如，HTML文档中的每一个`<div>`、`<p>`、`<img>`等元素都是一个节点，而它们的属性如`id`、`class`等则表现为属性节点。 **DOM的主要功能：** 1....
Javascript-dom-tutorial
03-09
JavaScript DOM（Document Object Model）教程 JavaScript DOM 是一种标准，用于表示HTML或XML文档的结构化表示，并提供了通过编程方式操作、访问和修改文档的方法。DOM是网页内容的树形结构，允许开发者像操作文件...
JS查找孩子节点简单示例
12-08
本文实例讲述了JS查找孩子节点功能。分享给大家供大家参考，具体如下： 以前看了JS方面的书，如今用到了，书看得再多，不用就忘了，所以经常用用你所学到的知识，温故知新。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>www.jb51.net 查找孩子结点</title> <meta keywords="商品目录"/> <meta description="JS查找孩子节点"/> <script type="text/javascri
JS获取子节点、父节点和兄弟节点的若干种方式
热门推荐
laok_的博客
07-22 26万+
一、js获取子节点的方式1.通过获取dom方式直接获取子节点其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。var a = document.getElementById("test").getElementsByTagName("div"); 2.通过childNodes获取子节点使用child
Jquery结点遍历
叫我安森
08-02 859
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，
DOM定义的5种选取元素方式
l_Irene的博客
06-09 1296
大多数客户端JavaScript程序运行时总是在操作一个或多个文档元素。当这些元素启动时，可以使用全局变量document来引用Document对象。为了操作文档中的元素，我们可以通过以下5种方式获得或选取这些引用文档元素的Element对象。 一、通过ID选取元素       任何一个HTML元素都有一个独一无二的ID属性，可以用Document对象的getElemenById()方法选取一
JS：DOM 获取节点
weixin_48475463的博客
01-31 1552
1. 获取元素下的所有 **子节点** .childNodes <body> <div> 我是第一个文本节点 <!-- 我是一个注释 --> <p>1</p> 我是最后一个文本节点 <p>2</p> </div> <script> var div = document.quer
JS的dom操作基础——获取元素
m0_59345890的博客
07-14 5119
2、getElementsByClassName("目标元素的class属性值")通过标签的class类名获取，获取的元素放在的类数组中返回，如果没找到返回空的类数组。4、getElementsByName("目标元素的name属性值")通过标签的name属性的值获取获取的元素放在的类数组中返回，如果没找到返回空的类数组。3、getElementsByTagName("目标元素的标签")通过标签名获取获取的元素放在的类数组中返回，如果没找到返回空的类数组。......
整理dom 获取当前元素的兄弟节点/父节点/子节点/筛选元素
很馋的虫子
07-09 1万+
$('#id').siblings() 当前元素所有的兄弟节点 $('#id').prev() 当前元素前一个兄弟节点 $('#id').prevaAll() 当前元素之前所有的兄弟节点 $('#id').next() 当前元素之后第一个兄弟节点 一、js 获取元素dom(父节点,子节点,兄弟节点)： var test = document.get...
DOM获取元素节点的子节点
qq_43383255的博客
09-12 6086
getElementsByTagName()，返回当前节点的指定边签名后代节点。 childNodes属性,当前节点的所有子节点(其中IE8及以下浏览器不会把空白处当成一个节点)。 children属性，获取当前元素的所有子元素。 firstChild属性，当前节点的第一个子节点。 lastChild属性，表示当前节点的最后一个子节点 innerText属性，可以获得元素内部的文本内容，没有标签。 innerHTML属性，与innerText类似，不过显示时会存在标签。 ...
原生JS常用的一些方法
kongjunchao159的博客
10-31 6795
JS选取DOM元素的方法 注意：原生JS选取DOM元素比使用jQuery类库选取要快很多 1、通过ID选取元素 document.getElementById('myid'); 2、通过CLASS选取元素 document.getElementsByClassName('myclass')[0]; 3、通过标签选取元素 document.getElementsByTagName('m
JavaScript全解读：从基础到DOM操作
DOM（文档对象模型）是JavaScript操作HTML和XML文档的标准，它将文档解析为节点树，包括根节点、父节点、子节点、兄弟节点和叶子节点。常见的节点类型包括文档节点、文本节点和属性节点。通过DOM，开发者可以动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值