JS DOM、点击事件

时间:2025-02-28 08:15:41

JS DOM

加载事件onload

js代码执行的时候,需要html&css的支持
onload在页面加载完之后执行
dom:用JS对html标签进行增删改查

元素节点获取

var name = ("userName");
var inputs = (''input);

文本节点获取

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

<div>hello<div>
var dvnode = ('div')[0];
; //(或者调用lastChild)获得元素div内部的第一个子节点对象,而不是自己这个节点

兄弟节点

firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下一个兄弟节点
previousSibling:获得上个兄弟节点
childNodes:父节点获得内部全部的子节点信息

<script>
 = function() {
    var ull = ('ul')[0];
    ();
    ();
    ();
    ();
    console,log();
}
</script>

父节点

节点名.parentNode

(blue);
();

属性值操作

1. 获取属性值

itnode.属性名; //只能操作五c规定的属性值
(属性名); //规定的和自定义的都可以获取

2. 设置属性值

itnode.属性名 = 值; //只能操w3c规定的属性
(名称,值); //规定的和自定义的都可以设置

(); //className是class的一个别名,不可以直接访问class属性

Field、Attribute、Property

节点创建和追加

1. 创建

元素节点:(tag标签名);
文本节点:(文本内容);
属性设置:(名称,值);

2. 追加

父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

节点删除

父节点.removeChild(子节点);

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

点击事件

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

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

在标签内些onclick事件
<input type="button" value="Press Me" οnclick="alert('thanks');">

在JS写οnclick=function(){}函数
var btn = ('btnld');
= function() {
    alert('thanks');
}