DOM

一、DOM对象

  document.getElementById(id)       通过元素 id 来查找元素

  document.getElementsByTagName(name)     通过标签名来查找元素

  document.getElementsByClassName(name)      通过类名来查找元素

  document.querySelector();    对象
  document.querySelectorAll();数组
 
样式  style
1             // 样式  style
2             // var li =document.querySelector("#li1");
3             // li.style.color="red"
4             // // li.style.background-color="#ccc";
5             // // 驼峰命名法
6             // li.style.backgroundColor="#ccc";
7             // // 数组命名法
8             // li.style["background-color"]="#ccc";

 

属性 attributes

1 // 属性  attributes
2             // console.log(li.id)
3             // console.log(li.data-id)
4             // console.log(li["data-id"])
5             // console.log(li.attributes["data-id"].name) name  value
6             // console.log(li.className)

 

兄弟节点

// var li=document.querySelector("#li1");
            // console.log(li.nextElementSibling)
            // console.log(li.previousSibling)
            // console.log(li.nextSibling)

 

文本节点

var ul =document.querySelector("ul");
        //    console.log( ul.childNodes)  文本节点
        //    console.log( ul.children)   不包括文本节点

 

 

添加和删除元素

document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流

 

 

 

DOM事件

mouseover 

  事件可用于当用户将鼠标移至 HTML 元素上时触发某个函数：

mouseout 

  事件可用于当用户将鼠标移出时触发某个函数：

mousedown

 当鼠标按钮被点击时

mouseup 

 当鼠标按钮被释放时

onclick 

 当鼠标点击完成后
change
单选、多选状态改变    下拉框选项改变    文本框的值改变的时候
keypress 此事件当用户按下和松开一个 ANSI 键时发生

 

二、innerHTML 属性

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

/ var li=document.querySelector("#li1")
            // li.onclick=function(){
                // console.log(this.innerHTML)  //html
                // console.log(this.innertext)  //text
                // console.log(this.outerHTML)  //含有本身

 

posted @ 2021-11-05 22:45  .Nice  阅读(19)  评论(0)    收藏  举报