一. 利用节点关系进行获取

1 . 父子关系

父节点 parentElement

 // 获取到父节点
var parent  =  document.getElementById("parent");

所有子节点 children

// 获取到所有的子节点
console.log(parent.children);

第一个子节点 firstElementChild

// 第一个子节点
var first = parent.firstElementChild;
console.log("第一个子节点",first);

最后个子节点 lastElementChild

// 最后一个子节点
var last  = parent.lastElementChild;
console.log("最后一个",last);

2. 兄弟关系

上一个兄弟 previousElementSibling

//上一个兄弟节点
var pre = me.previousElementSibling;
console.log(pre);

下一个兄弟 nextElementSibling

// 下一个兄弟节点
var next = me.nextElementSibling;
console.log(next);

二 . 对属性的处理

getAttribute 获取属性

setAttribute 设置属性

removeAttribute 移除属性

<body><h1>属性修改</h1><img src="data:images/pic1.png" alt="一张好图"><br/><button onclick="changeImg()">修改图片</button><script>function changeImg(){// 获取图片var img = document.querySelector("img");// 获取图片的src属性console.log(img.getAttribute("src"))// 修改图片的src属性img.setAttribute("src",'./images/pic2.png');// 删除alt属性img.removeAttribute("alt");}</script></body>

三. 节点的信息

js的DOM核心编程，每个元素都是一个节点，节点有不同类型有不同信息

nodeName节点的名称

元素节点：返回的是元素标签名大写例P

文本节点：返回#text

nodeType节点的类型

<body><input type="text" placeholder="请输入用户" id="Input"> <!-- 这是一个注释哦,请不要删除 --><script>//获取注释节点let Input1 = document.getElementById('Input')let nextNode = Input1.nextSiblingconsole.dir(nextNode)</script></body>

区别

fristChild 第一个子节点（可以是文本，可以是元素）
firstElementChild 第一个元素子节点（只能是元素）

nextSibling nextElementSibling

四. 节点的操作

创建节点 document.createElement(tag)

删除节点：elem.remove() elem.parentElment.removeChild(elem）

复制节点 ,不带子节点 var elem2 = elem.cloneNode(false)

复制节点，带子节点 var elem3 = elem.cloneNode(true)

插入节点 parent.appendChild(elem) 将elem插入到parent最后面

插入节点parent.insertBefore(新的节点，相关节点)把新的节点插入到相关节点的前面

替换节点 parent.replaceChild(新的节点，被替换的节点

<body><h1>节点的创建与插入</h1><button type="button" onclick="createImg()">创建并插入</button><button type="button" onclick="copyImg()">复制图片</button><button type="button" onclick="delImg()">删除</button><button type="button" onclick="insertImg()">指定位置</button><br/><p id="myp">咱们是一个p标签</p><img src="data:images/pic1.png" id="pic1"><script>function insertImg(){// 创建图片var img = document.createElement("img");// 指定图片的srcimg.setAttribute("src",'images/pic3.png');// 选中要插入的相关节点var myp = document.getElementById("myp");// 执行插入document.body.insertBefore(img,myp);}function delImg(){// 找到要删除的图片(last-of-type 选中最后一张图片)var img = document.querySelector("img:last-of-type");// 执行删除// img.remove();//自己删除自己// 用父节点来删除img.parentElement.removeChild(img);}function copyImg(){// 01 选中被复制的图片var pic1 = document.getElementById("pic1");// 02 复制var img = pic1.cloneNode(false); //true包含子节点，false只是当前节点// 03 插入到body中(document.body 直接获取body元素节点)document.body.appendChild(img);}function createImg(){// 通过js创建一张图片var img = document.createElement("img");// 指定图片的src值img.setAttribute("src",'images/pic2.png');// 插入到body标签document.body.appendChild(img);}</script></body>

五. js对表格的操作

创建行 row = table.insertRow(index)

创建列 col = row.insertCell(index)

设置列的内容 col.innerText="xxx"

选择第一行 table.firstElementChild.fristElementChild

<body><table border="1" cellspacing="" cellpadding=""><tr><td>书名</td> <td>价格</td> <td>操作</td></tr><td>精通js</td> <td>16.8</td> <td><button>删除</button></td></tr></tr><td>60个瞬间</td> <td>32.2</td> <td><button>删除</button></td></tr></table><button type="button" onclick="addRow()">增加一行</button><button type="button" onclick="delRow()">删除第一行</button><button type="button" onclick="changeTitle()">修改标题</button><script>function changeTitle(){// var list = document.getElementsByTagName获取的是一个类似列表// [table,table] 第一个table // list[0]var table = document.getElementsByTagName("table")[0];// table 默认会添加一个tbody标签// table第一个子节点tbody tbody第一个子节点是trvar row = table.firstElementChild.firstElementChild;row.style.backgroundColor="#f30";console.log(row);}function delRow(){// 通过标签名table获取var table = document.getElementsByTagName("table")[0];// 删除第0行table.deleteRow(1);}function addRow(){// 通过标签名table获取var table = document.getElementsByTagName("table")[0];// 插入行var row = table.insertRow(2);// 一行插入2列表var td1 = row.insertCell(0);var td2 = row.insertCell(1);var td3 = row.insertCell(2);// 设置列的内容td1.innerText = "精通Vue3.0";td2.innerText = "20.00";td3.innerHTML = '<button>删除</button>';}</script></body>

六. select下拉框

创建一个option
var option = new Option(text,value)

插入一个option
select.add(option,before)

<form action="http://vip.biancheng.net/login.php" method="post">年龄区间：<select><option>18岁以下</option><option>18-28岁</option><option>28-38岁</option><option>38岁以上</option></select>
</form>

七. 事件的注册

DOM0 在html标签中
<h1 οnclick="callMe()">

DOM1 实现js与html分离
btn.οnclick=callMe;
btn.onclick = function(){}
(多次注册，只会执行最后一个)

DOM2 可以添加多个，也可以移除
btn.addEventListener(“click”,callMe)
btn.addEventListener("click",function(){})

移除全部click
btn.removeEventListenter("click")
移除一个
btn.removeEventListenter("click",callMe)

<body><h1 onclick="callMe()">事件的监听</h1><button id="btn">点我</button><button id="btn2">随意</button><script>//js事件的监听有三种方式//1.事件响应函数写在标签里function callMe(){alert('我爱学习')}//2.在js中注册var btn = document.getElementById('btn');// btn.onclick = callMe;btn.onclick= function(){alert('我爱学习');}var btn2 = document.getElementById('btn2');btn2.addEventListener('click',callMe)btn2.addEventListener('click',function(){alert('我爱学习');})</script>
</body>

js对节点属性的操作相关推荐

js获取节点的DOM操作
一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...
驰骋工作流引擎的流程属性-节点属性-前台操作
1: 工作流引擎功能-流程属性 • 支持客户参与流程:比如在一个erp系统里供应商相对企业来说是外部用户,在一个学校系统里,教师是内部用户,学生是外部用户.ccflow支持外部用户登录参与 ...
DOM下的节点属性和操作小结
属性: 1 .nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeName,是只读的. 2 .nodeType 值:1,元素节点:2,属性节 ...
js 中对象--属性相关操作
查询属性: 可以用对象.属性来查询属性和属性方法或者对象["属性"] 来查询属性和属性方法演示代码: ...
js第7章DOM案例：获取操作的元素、元素内容操作、元素属性操作、classList的使用、获取节点、节点追加、删除节点和节点属性
目录 1.获取操作的元素 document对象的方法 document对象的属性 Element对象的方法和属性 2. 元素内容操作 3.元素属性操作 4.classList的使用 5. 获取节点 6 ...
js给标签添加属性和值_jquery节点属性
一.节点操作 1.DOM内容节点操作: ①innerHTML属性:设置或获取文本的内容(普通文本和标签). ②innerText属性:设置或获取文本的内容(普通文本),存在兼容性问题. 2.j ...
前端：JS/25/DOM官方定义，DOM分类，HTML节点树（节点关系，节点类型，），核心DOM中公共的属性和方法（节点访问，查找DOM节点，节点属性，节点的创建，追加和删除）
DOM官方定义 DOM,Document Object Model,文档对象模型,我们可以把网页中的所有"东西"看成是对象": DOM的官方定义:DOM可以使用脚本,动态 ...
XSLT实现XML无极限树（精简版）［二］解决没有递归出节点属性值总和的问题（JS实现）...
XML数据源文件和第一版的一样! 这个XSLT解决没有递归出节点属性值总和的问题不过是借助JS实现的不管怎么样,问题算是解决了! <xsl:stylesheet version=" ...
【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
这篇文章,主要介绍JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性.DOM增删改查. 目录一.JS中的DOM 1.1.什么是DOM 1.2.获取DOM结点 (1)获取htm ...

js对节点属性的操作

一. 利用节点关系进行获取

1 . 父子关系

2. 兄弟关系

二 . 对属性的处理

三. 节点的信息

nodeName节点的名称

nodeType节点的类型

区别

四. 节点的操作

五. js对表格的操作

六. select下拉框

七. 事件的注册

js对节点属性的操作相关推荐

最新文章

热门文章

js对节点 属性的操作

一. 利用节点关系进行获取

1 . 父子关系

2. 兄弟关系

二 . 对属性的处理

三. 节点的信息

nodeName节点的名称

nodeType节点的类型

区别

四. 节点的操作

五. js对表格的操作

六. select下拉框

七. 事件的注册

js对节点 属性的操作相关推荐

最新文章

热门文章

js对节点属性的操作

js对节点属性的操作相关推荐