js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式
参考书籍：《JavaScript DOM编程艺术 第2版》
本博客代码的测试页面是：https://www.layui.com/
js dom操作
js 获取元素节点
- 一份document就是一棵节点树
// 1. 根据元素id名称获取dom, return→对象
document.getElementById('submit_btn')
// 2. 根据元素标签名称获取dom, return→对象数组
document.getElementsByTagName ('ul')
// 3. 根据元素class名称获取dom, return→对象数组
document.getElementsByClassName('menu active’')
js 绑定onclick事件
- 一个浏览器窗口可以加载某个HTML文档，相对应的，window对象有个属性就是document。当HTML文档全部加载完成时，会触发window对象的onload事件，此时，document对象已经存在了。
- 用js给某个元素绑定onclick事件，需要确定整个dom都已经加载完成。所以，在用
<script></script>标签引用的js文件里，需要在onload事件内，给dom绑定onclick事件。
// onload
window.onload = function(){// 获取body元素var bodyDom = window.document.getElementsByTagName('body')[0];var headerDom = bodyDom.getElementsByClassName('layui-header header header-index')[0];// 绑定onclick事件headerDom.onclick=function(){alert('23232')}
};
js 获取属性 修改属性值
// 获取元素
var aDom = document.getElementsByTagName('body')[0].getElementsByClassName('logo')[0];
// 设置元素属性值：src、href、title、disabled等
// 方法1，有限制
aDom.href= 'ww.baidu.com';
// 方法2，可修改任何属性
aDom.setAttribute('href','aaaaa');// 获取元素属性值
// 方法1
var aDomHref = aDom.href;
// 方法2
aDom.getAttribute('href');
js 动态更新html
如果需要把一大段html内容插入到某个元素中，可以用innerHTML
.building-check-div {display: inline-block;width: 145px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
var bodyDom = window.document.getElementsByTagName('body')[0];
var headerDom = bodyDom.getElementsByClassName('layui-header header header-index')[0];
var arr = [{id:1,nodeName1:'开盘'},{id:2,nodeName1:'桩基开工'},{id:3,nodeName1:'项目入伙'},{id:4,nodeName1:'竣工验收备案'},{id:5,nodeName1:'工程达到预售条件'}];
var inputHtml = '';
var disabledHtml = '';
for (var i = 0; i < arr.length; i++) {// ' <input type="checkbox" class="checkedit" value="' + data + '" οnchange="thischeck(this)">'inputHtml += '<div class="building-check-div">';inputHtml += '<input type="checkbox" name="buildings" value="'+arr[i].id+'" data-id="'+arr[i].id+'" οnchange="" data-name="'+ arr[i].nodeName1 +'" '+disabledHtml+'/>' + arr[i].nodeName1;inputHtml += '</div>';if((i+1)%4 == 0 && i != 0){inputHtml += '<br>';}
}
headerDom.innerHTML = inputHtml;
js 创建节点
DOM是文档的表示，在DOM看来，一个文档就是一棵节点树。如果想在节点树上添加标记，就必须插入新的元素节点。
// 1.创建一个新的元素
var pDom = document.createElement('p');
// 2.添加文本
// 方法1-添加文本节点
var textDom = document.createTextNode('下雨了-我是<p></p>元素我在滚动条最下面');
pDom.appendChild(textDom);
// 方法2-修改节点内html的内容
//pDom.innerHTML = '下雨了';// 3.把这个新元素插入节点树
var bodyDom = window.document.getElementsByTagName('body')[0];
bodyDom.appendChild(pDom); // appendChild 会将新元素添加到最后
js 在已有元素前插入新元素
var bodyDom = window.document.getElementsByTagName('body')[0];
var pDom = document.createElement('p');
var textDom = document.createTextNode('下雨了-我是<p></p>元素我在header前面');
pDom.appendChild(textDom);
bodyDom.insertBefore(pDom,bodyDom.getElementsByClassName('layui-header header header-index')[0]);
js 在已有元素后面插入新元素
/*** 在已有元素后面插入新元素* @param newDom 新元素* @param targetDom 目标元素*/
function insertAfter(newDom, targetDom){var parent = targetDom.parentNode;if(parent.lastChild == targetDom){parent.appendChild(newDom);}else{parent.insertBefore(newDom,targetDom.nextSibling);}
}
js 获取子元素
// 获取body元素的全部子元素, return→对象数组
document.getElementsByTagName('body')[0].childNodes// 获取body元素的第一个子元素
// 方法1
document.getElementsByTagName('body')[0].childNodes[0]
// 方法2
document.getElementsByTagName('body')[0].firstChild// 获取body元素的最后一个子元素
var bodyDom = document.getElementsByTagName('body')[0];
var bodyChildArr = bodyDom.childNodes;
// 方法1
bodyChildArr[bodyChildArr.length - 1]
// 方法2
bodyDom.lastChild
js 阻止a标签默认跳转
在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值将传递给对应的事件处理函数。
当给<a></a>标签添加onclick事件时，让这个处理函数所触发的代码返回false，那么，onclick事件处理函数就认为“这个链接没有被点击”，就可以阻止<a></a>标签的默认跳转行为。
js 节点类型 nodeType
节点类型nodeType共有12中可取值，其中：1-元素节点 2-属性节点 3-文本节点
// 获取body元素的第一个节点的类型, return→int
document.getElementsByTagName('body')[0].childNodes[0].nodeType
js 改变css样式
className属性
可以用追加className的方式，修改元素的class属性。
var bodyDom = window.document.getElementsByTagName('body')[0];
var headerDom = bodyDom.getElementsByClassName('layui-header header header-index')[0];
// 注意，第一个字符是空格
headerDom.className += headerDom.className.indexOf('danger-red') > -1 ? '':' danger-red'
console.log(headerDom.className);
style属性
用element.style的方式，可以改变这个元素的样式。但是，style对象只能返回内联样式，只包含在html代码里用style属性声明的样式，对于在css里定义的样式是获取不到的。
var bodyDom = window.document.getElementsByTagName('body')[0];
var headerDom = bodyDom.getElementsByClassName('layui-header header header-index')[0];
headerDom.style.background = 'red';
// 中间有-的样式属性名，对应为驼峰法名称
headerDom.style.fontSize = '40px';
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式相关推荐
- 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
- js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)
jsfor循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting 'className') 我想要 ...
- js如何修改html样式,怎么用js改变css样式？
怎么用js改变css样式?下面本篇文章给大家介绍一下使用JavaScript改变css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 怎么用js改变css样式? 1.通过 ...
- 如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
- js函数改变html样式,JavaScript改变CSS样式的方法汇总
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样 ...
- JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
- jQuery基础 - 改变CSS样式
本文转自:http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html,所有权利归原作者所有. jQuery提供css()的方法 ...
- js改变css样式_React 中使用CSS的7种方法
来源 | https://www.jianshu.com/p/74aa74484579 第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import Reac ...
- js动态改变css样式
动态改变页面元素样式: 使用getElement系列方法访问元素. 改变样式属性:style属性:className属性. <!DOCTYPE html> <html>< ...
最新文章
- const修饰的指针常量和常量指针
- c# 获取ajax数据,c# asp.net jQuery AJAX 从 MySQL 中获取数据
- 在Mono/Linux上使用PerformanceCounter
- 我心目中理想的开源软件
- 基于Conditional Layer Normalization的条件文本生成
- 蓝桥杯基础模块4_3：矩阵按键
- select选中的值_selenium下拉框处理（select）
- ElasticSearch 7 正式发布！
- c char转int_C/C++基础之sizeof使用
- pip install报python setup.py egg_info Check the logs for full command output.
- erstudio连接mysql_ERStudio的使用
- 基于台达PLC的步进电机控制＜续一＞
- ThingJS图表整合
- Matlab学习手记——输出到MathType公式编辑器
- TestNG使用教程
- 从txt中读取float数据C++
- 关于阿里云服务器的使用（入门级）
- 数据分析师python面试题_数据分析师面试题
- ljd-2008+下载式多功能实验开发系统_运动控制模型仿真实验平台（YXMCP-ATCA-150）...
- 存在心里的人，走进生命的魂