firstChild, className,childNodes,parentNode的简单实用

最新推荐文章于 2024-08-13 21:02:23 发布
原创 最新推荐文章于 2024-08-13 21:02:23 发布 · 276 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用JavaScript操作DOM中的节点，包括获取父对象、父节点及子节点的方法，并展示了如何通过修改背景图片和类名来改变页面元素的样式。
　　function showmsg(obj) { document.getElementById("qxdt").background="images /JX2_630.jpg"; document.getElementById("qxdt").firstChild.classNa me="bz1"; document.getElementById("qsydt").background="image s/JX2_630.jpg"; document.getElementById("qsydt").firstChild.classN ame="bz1";document.getElementById("jnrcpy").backgro und="images/JX2_630.jpg"; document.getElementById("jnrcpy").firstChild.class Name="bz1";document.getElementById("cxcgyy").backgr ound="images/JX2_630.jpg"; document.getElementById("cxcgyy").firstChild.class Name="bz1"; obj.background="images/JX2_28.jpg"; obj.firstChild.className="bz"; } aaa aa dd dd dd das dadf dsaf sdafu adfsaf sdaf sdaf asdf sfa aa
　　function rdl_fnSwap(){
　　oList.children(2).swapNode(oList.children(1));
　　}
　　
　　
　　第1个列表项目
　　第2个列表项目
　　第3个列表项目
　　第4个列表项目
　　
　　
　　parentElement 获取对象层次中的父对象。
　　parentNode 获取文档层次中的父对象。
　　childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
　　children 获取作为对象直接后代的 DHTML 对象的集合。
HtmlAgilityPack，C#实用的HTML解析类 ---- HtmlNode类
追随内心
04-08 682
HtmlAgilityPack中的HtmlNode类与XmlNode类差不多，提供的功能也大同小异。下面来看看该类提供功能。 一、静态属性 public static Dictionary<string, HtmlElementFlag> //ElementsFlags;获取集合的定义为特定的元素节点的特定行为的标志。表包含小写标记名称作为键和作为值的 HtmlElementF...
一些实用的学生向脚本(补)
yuanfangyoushan的博客
05-12 7716
重定向优化百度搜狗谷歌必应搜 // ==UserScript== // @name AC-baidu:重定向优化百度搜狗谷歌必应搜索_favicon_双列 // @name:en AC-baidu:google_sogou_bing_RedirectRemove_favicon_adaway_TwoLine // @name:zh AC-baidu:重定向优化百度搜狗谷歌必应搜索_favicon_双列 // @name:zh-CN AC-bai
childNodes，parentNode，offsetParent，firstChild，className
weixin_42270374的博客
07-31 183
获取节点(包括空节点) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--dom对页面进行操作--> <!...
DOM-childNodes,parentNode,className,createElement,insertBefore,removeChild
weixin_33726313的博客
06-16 256
sha1、childNodes<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> </head> <scripttype="text/javascri...
关于parentNode和firstChild的一些坑
weixin_34004576的博客
10-04 1018
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript中的firstchild
bofengshuimen700的专栏
05-27 8556
Microsotf Yahoo Easy W3c/Javascript Design|Source var container=document.getElementById("contain");
关于DOM4J对xml的解析步骤
weixin_44835937的博客
09-08 480
DOM4J解析XML 掌握 步骤: 1. //引入jar文件 dom4j.jar 2. //创建一个指向XML文件的输入流 3. FileInputStream fis = new FileInputStream("xml文件的地址"); 4. //创建一个XML读取工具对象 5. SAXReader sr = new SAXReader(); 6. //使用读取工具对象, 读取XML文档的输入流 , 并得到文档对象 7. Document doc = sr.read(fis); 8. //通
web开发者的实用参考书
07-02
### Web开发者的实用参考书知识点总结 #### 一、文档元素获取 在Web开发中，高效地操作DOM（文档对象模型）是至关重要的。以下是一些常用的方法来获取页面中的元素： 1. **`document.getElementById('id')`** - ...
原生HTML5、CSS、JavaScript实现简易网易云音乐播放
I am the light coursing in the soul of the moon.
08-13 757
【代码】原生HTML5、CSS、JavaScript实现简易网易云音乐播放。
使用Java编写一个简单的Web的监控系统cpu利用率，cpu温度，总内存大小
dgqvhtlwq472235338的博客
11-29 768
原文：http://www.jb51.net/article/75002.htm 这篇文章主要介绍了使用Java编写一个简单的Web的监控系统的例子,并且将重要信息转为XML通过网页前端显示,非常之实用,需要的朋友可以参考下 公司的服务器需要实时监控，而且当用户空间已经满了，操作失败，或者出现程序Exception的时候就需要实时提醒，便于网管和程序员调式，这样就把这个实...
常用的4种获取元素方法的区别, getElementById, ..ClassName, ..TagName, .Name
Park_Geun_hye的博客
02-18 6498
原生JS常用的4种获取元素方法分别是：getElementById( )返回的是一个dom对象（第一个输出）而getElementsByClassName( )、getElementsByTagName( )、getElementsByName( )返回的是元素集合（第二、三、四个输出）那么，这返回的两种东西有什么区别呢？## dom对象可以通过dom属性里的获取子节点属性，来操作其子元素（其他元...
parentElement\parentNode.parentNode.childNodes用法例子
zb0567的专栏
01-06 4217
offsetParent，parentNode,parentElement 区别  offsetParent  指与位置有关的上级元素  parentNode  指与位置无关的上级元素  parentElement 和 parentNode一样,但parentNode是W3C标准的parentElement 只在IE中可用.   第一种方法   New Docume
javascript 中 parentNode，childNodes、children 应用
热门推荐
fox123871的专栏
07-12 1万+
"parentNode"常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点     例: My text 在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的文字部分. 如果你打算用getElemen
js实现添加className
weixin_30563319的博客
03-06 2087
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...
JavaScript获取指定classname的父节点
zmall博客
12-18 4038
//获取指定class的父节点 function getParents(element, className) { var that = this; var returnParentElement = null; function getParentNode(element, className) { if(that.isElement(element)) {
parentNode、parentElement，childNodes、children 区别
MIR_zhang的博客
04-26 2397
parentElement 获取对象层次中的父对象。 parentNode 获取文档层次中的父对象。 childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。 children 获取作为对象直接后代的 DHTML 对象的集合。 parentNode和parentElement功能一样，childNodes和children功能一样。但是p...
【实用总结】DOM节点className操作
dengrong8117的博客
12-13 286
经常用到的小工具函数，每次用到都重写一遍，有点浪费体力，于是决定分阶段整理下，需要用到的时候就直接拷过来用了～ 对于dom节点的className，常用操作不外乎增、删、查（改可以用增+删事先），由于代码比较简单，直接上源码+接口注释 /** * @description 给节点添加类 * @param {DOMObject} node dom节点 * @param ...
用js标识
最新发布
03-18
### 如何使用 JavaScript 实现标识功能 在网页开发中，“标识”通常指的是高亮显示某些特定的内容或者给某个 DOM 节点附加额外的信息以便后续操作。以下是几种常见的实现方式： #### 方法一：通过修改 CSS 类名实现高亮效果 可以通过 `Element.classList` API 来动态添加或移除类名，从而改变目标元素的样式。 ```javascript function highlightElement(element, className = 'highlight') { element.classList.add(className); } // 示例调用 const targetElement = document.querySelector('#target'); highlightElement(targetElement); // 高亮指定元素 ``` 这里假设 `.highlight` 是一个预定义好的 CSS 类[^1]，它包含了用于视觉上突出显示的效果。 #### 方法二：创建并附着新的 HTML 元素作为标记 如果希望更直观地标记某部分区域，则可以生成一个新的标签（比如 `<span>` 或者自定义组件），将其放置到文档流中的适当位置。 ```javascript function markText(nodeList) { nodeList.forEach((node) => { const markerSpan = document.createElement('span'); markerSpan.style.backgroundColor = '#FFFF00'; // 设置背景颜色为黄色表示被选中状态 while (node.firstChild) { markerSpan.appendChild(node.firstChild); } node.parentNode.insertBefore(markerSpan, node.nextSibling); node.remove(); }); } // 使用示例 let selectedNodes = window.getSelection().getRangeAt(0).cloneContents(); markText(selectedNodes.childNodes); ``` 上述代码片段展示了如何捕获当前用户的文本选择范围，并对该范围内所有的节点应用特殊的外观处理逻辑[^2]。 #### 方法三：利用数据属性存储元信息 除了可视化的标注之外，在不干扰界面布局的情况下也可以借助HTML5的数据特性来记录关联资料。 ```javascript function tagWithMetadata(elementsArray, keyName, keyValue){ elementsArray.forEach(function(el){ el.setAttribute(`data-${keyName}`, keyValue); }) } var paragraphs = Array.from(document.querySelectorAll('p')); tagWithMetadata(paragraphs , 'category' ,'introduction'); ``` 此段脚本会遍历页面上的所有段落(`<p>`)并将它们分类设为“介绍”。 --- ### 注意事项 当执行这些操作时需要注意浏览器兼容性和性能影响等问题；另外还需考虑用户体验方面因素如是否允许撤销动作等扩展需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值