JS-DOM-元素节点
查看元素节点:
1、getElementById():通过 id 取到唯一节点;如果 id 重名,只能取到第一个
getElementByName(): 通过name属性
getElementByTagName(): 通过标签名
getElementByClassName(): 通过class名
获取元素节点时,一定要注意:获取节点的语句,必须在 DOM 渲染完成之后执行。2种方式实现:
①将 JS 代码写在 body 之后
②将代码写到window.onload 函数之中
后面三个,取到的是数组格式,不能直接添加各种属性,而应该取出数组的每一个单独操作
例如: getElementByName("name1")[0].onclick = function
查看/设置属性节点:
1、查看属性节点:getAttribute("属性名");
2、设置属性节点:setAttribute("属性名","新属性值");
>>>查看和设置属性节点,必须先取到元素节点,才能使用
>>>setAttribute():在IE浏览器中可能会存在兼容性问题。比如在IE中不支持使用这个函数设置style/onclick等
样式属性和事件属性
>>>我们推荐使用点符号法代替上述函数:
eg:dom1.style.color="" dom1.style.οnclick="" dom1.style.src=""
查看设置文本节点:
1、 .innerText: 取到或设置节点里面的文字内容;
.innerHTML: 取到或设置节点里面的HTML代码
.tagName : 取到当前节点的标签名,标签名全部大写显示。
总结: JS 修改DOM节点的样式
1、使用setAttribute()设置class和style属性,但存在兼容性问题,
不提倡 div.setAttribute("class","cls1");
2、使用 .className直接设置class类,注意是 className而不是.class:
div.className="cls1"
3、使用 .style设置单个属性,注意属性名要使用 驼峰命名法:
div.style.backgroundColor="red";
4、使用.style 或 .style.cssText 设置多个属性样式:
div.style="background-color:red;color:yellow;"
div.style.cssText="background-color:red;color:yellow;"
【删除或替换节点】
1. 父节点.removeChild(被删节点): 删除父节点中的子节点;
2. 父节点.replaceChild(新节点,老节点): 使用新节点,替换掉老节点
【创建并新增节点】
1. document.createElement("标签名"):创建节点 。需要配合 setAttribute设置各种新的属性;
2. 父节点.appendChild(新节点):末尾追加方式插入节点
3. 父节点.insertBefore(新节点,目标节点):在目标节点前插入新节点.
4. 被克隆节点对象.cloneNode(true/false):克隆节点
>>> 传入true: 表示克隆当前节点,以及当前节点的所有子节点;
>>> 传入false或不传: 表示只克隆当前节点,而不克隆子节点。
【根据层次获取节点】
这些方法调用后面都不加括号,例如下述紧跟示例代码
1 .childNodes: 获取元素的所有子节点。包括回车等文本节点。
.children: 获取当前元素的所有元素节点(只获取标签)。
2 .firstChild: 获取元素的第一个子节点。包括回车等文本节点。
.firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。
.lastChild: 获取元素的最后一个子节点。包括回车等文本节点。
.lastElementChild:获取元素的最后一个子节点。不包括回车等文本节点。
3 .parentNode: 获取当前节点的父节点。
4 .previousSibling: 获取当前节点的前一个兄弟节点;包括回车等文本节点。
.previousElementSibling:获取当前节点的前一个兄弟节点;不包括回车等文本节点。
5 .nextSibling: 获取当前节点的后一个兄弟节点;包括回车等文本节点。
.nextElementSibling: 获取当前节点的后一个兄弟节点;不包括回车等文本节点。
6 .getAttributes: 获取当前节点的属性节点。
转载于:https://www.cnblogs.com/yingyingh5/p/7716128.html
JS-DOM-元素节点相关推荐
- js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术 第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点 一份document ...
- js获取元素节点对象
js获取元素节点对象
- js操作元素节点对象value
js操作元素节点对象value
- js操作元素节点对象innerHTML
js操作元素节点对象innerHTML
- JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- JavaScript 要点(十四)HTML DOM 元素(节点)
A.创建新的 HTML 元素 如需向 HTML DOM 添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> ...
- html js 选择器,h.js - dom元素选择器
dom元素选择器 使用h(selector)可以快速的选择dom元素,支持下面几种选择方式: 1.id选择器 2.类选择器 3.标签选择器 4.原生对象选择器 选择器语法及返回语法: h('选择器') ...
- JS自定义元素节点/属性的使用 createElement、setAttribute、getAttribute、appendChild
文章目录 自定义元素节点/属性 如何创建 创建元素节点 自定义元素属性 实列:创建一个input框在指定的盒子里 如果想要添加到指定的盒子之后可以使用转到父节点追加 自定义元素节点/属性 顾名思义,自 ...
- vue获取dom元素节点并操作元素的样式($el的用法操作元素样式)
在vue中操作dom元素 第一种:$refs <div ref="box"></div> 在标签身上可以写一个ref属性,然后就可以通过this.$refs ...
- js获取元素节点的几种方法
1.以元素名获取 //通过标签名获取元素节点(获取0到多个节点) //书写格式: //document.getElementsByTagName("元素名") let divEle ...
最新文章
- Yolo(2)Yolo v2
- WIN7下回收站不小心删除的文件怎么恢复,免费数据恢复软件下载
- 20172324 2018-2019-1 《程序设计与数据结构》第七周学习总结
- Android Notification总结
- half-sync/half-async 和 Leader/Followers 模式的主要区别
- kibana-7.15.2 一分钟下载、安装、部署 linux
- Python机器学习:决策树002信息熵
- linux下挂载光驱
- Java入门第37课——猜字母游戏之设计数据结构
- 什么是Maven以及Maven的优点有哪些?
- 21_在线支付原理与实现
- winform中ComboBox下拉框控件的动态数据填充
- 全球及中国SAS-RAID控制器行业十四五展望规划及发展决策建议报告2021年版
- 【安全】eWebeditor编辑器上传webshell
- 简单的一种图像冷暖色温转换(MATLAB)
- p5js动漫角色临摹
- 有道云笔记不同步_有道云笔记无法同步如何处理?笔记无法同步解决方法介绍...
- 怎么做读书分享PPT课件?
- 产品经理和软件工程师的职能划分
- python 小游戏 《孙悟空大战白骨精》
热门文章
- Java发送邮件工具类(可发送匿名邮件)
- 能和LoadRunner匹敌的VS2010/2012Web负载测试
- Could not load file or assembly App_Licenses.dll的问题
- 假装不知道有尽头(博弈论的诡计)
- 怎样在swift中创建CocoaPods
- 201771010111李瑞红《面向对象的程序设计》第八周实验总结
- 恶意软件每天至少30万个变种 杀毒软件捉襟见肘 来看4种恶意软件反查杀技术...
- bash 脚本编程2 条件判断 (笔记)
- 简易RS232 建模二 (接收)
- Python基础06-数据类型:元组tuple