JS DOM、点击事件

JS DOM

加载事件onload

js代码执行的时候,需要html&css的支持

onload在页面加载完之后执行

dom:用JS对html标签进行增删改查

元素节点获取

var name = document.getElementById("userName");

var inputs = document.getElementsByTagName(''input);

文本节点获取

需要借助div元素节点在获得其内部的文本节点。

<div>hello<div>

var dvnode = document.getElementsByTagName('div')[0];

divnode.firstChild; //(或者调用lastChild)获得元素div内部的第一个子节点对象,而不是自己这个节点

兄弟节点

firstChild、lastChild:父节点获得第一个/最后一个子节点

nextSibling:获得下一个兄弟节点

previousSibling:获得上个兄弟节点

childNodes:父节点获得内部全部的子节点信息

html 复制代码
<script>
window.onload = function() {
    var ull = document.getElementsByTagName('ul')[0];
    console.log(ull.childNodes);
    console.log(ull.firstChild);
    console.log(ull.firstChild.nextSibling);
    console.log(ull.lastChild);
    console,log(ull.lastChild.previousSibling);
}
</script>

父节点

节点名.parentNode

console.log(blue);

console.log(blue.parentNode);

属性值操作

1. 获取属性值

itnode.属性名; //只能操作五c规定的属性值

itnode.getAttribute(属性名); //规定的和自定义的都可以获取

2. 设置属性值

itnode.属性名 = 值; //只能操w3c规定的属性

itnode.setAttribute(名称,值); //规定的和自定义的都可以设置

html 复制代码
console.log(baidu.className); //className是class的一个别名,不可以直接访问class属性

Field、Attribute、Property

节点创建和追加

1. 创建

元素节点:document.createElement(tag标签名);

文本节点:document.createTextNode(文本内容);

属性设置:node.setAttribute(名称,值);

2. 追加

父节点.appendChild(子节点);

父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边

父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

节点删除

父节点.removeChild(子节点);

知道子节点的,需要通过子节点找到父节点,然后再删除子节点:

green.parentNode.removeChild(green);

点击事件

通过鼠标、键盘对页面所做的动作就是事件。事件一旦发生需要有事件处理,该处理成为"事件驱动",事件驱动通常由函数担任

onclick、onmouseover、onmouseout、onkeyup、onkeydown、onblur、onfocus、onsubmit

在标签内些onclick事件

<input id="btnld" type="button" value="Press Me" οnclick="alert('thanks');">

在JS写οnclick=function(){}函数

var btn = document.getElementById('btnld');

btn.onclick = function() {

alert('thanks');

}

相关推荐
Domain-zhuo几秒前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
SoraLuna1 分钟前
「Mac玩转仓颉内测版24」基础篇4 - 浮点类型详解
开发语言·算法·macos·cangjie
小丁爱养花8 分钟前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ16 分钟前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六16 分钟前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
西凉河的葛三叔20 分钟前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
徐同保21 分钟前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~21 分钟前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
生信摆渡22 分钟前
R语言-快速对多个变量取交集
开发语言·数据库·r语言
周三有雨28 分钟前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript