HTML DOM Document 对象

一·根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

　　　　整个文档是一个文档节点(document对象)

　　　　每个 HTML 元素是元素节点(element 对象)

　　　　HTML 元素内的文本是文本节点(text对象)

　　　　每个 HTML 属性是属性节点(attribute对象)

　　　　注释是注释节点(comment对象)

二·DOM节点属性

　　(自身)属性:

　　　　attributes - 节点（元素）的属性节点

　　　　nodeType – 节点类型

　　　　nodeValue – 节点值

　　　　nodeName – 节点名称

　　　　innerHTML - 节点（元素）的文本值

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="div1">
    <p name="littleP" class="p1">hello p</p>
</div>
<script>
   var ele=document.getElementsByClassName("p1")[0];

    console.log(ele)
   console.log(ele.nodeName);//获取节点名称
   console.log(ele.nodeType);//获取节点类型
   console.log(ele.nodeValue);//获取节点值
   console.log(ele.innerHTML);//获取节点文本
   ele.innerHTML="hello world"//更改节点文本
</script>
</body>
</html>

View Code

　　导航属性:

　　　　parentNode - 节点（元素）的父节点 (推荐)

　　　　firstChild – 节点下第一个子元素

　　　　lastChild – 节点下最后一个子元素

　　　　childNodes - 节点（元素）的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="div1">
    <p name="littleP" class="p1">hello p</p>
    <div>divdiv</div>
</div>
<script>
   var ele=document.getElementsByClassName("p1")[0];

   var p_ele=ele.parentNode;//获取节点对象的父节点
   console.log(p_ele.nodeName)
    var b_ele=ele.nextSibling;//获取节点对象的同胞节点（不推荐使用，会取出换行符）
   console.log(b_ele.nodeName);
    var b_ele2=ele.nextElementSibling;//获取节点对象的同胞节点（推荐使用）
    console.log(b_ele2.nodeName)
</script>
</body>
</html>

View Code

三·访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：

　　页面查找：

　　　　通过使用 getElementById() 方法

　　　　通过使用 getElementsByTagName() 方法

　　　　通过使用 getElementsByClassName() 方法

　　　　通过使用 getElementsByName() 方法

四·HTML DOM Event(事件)

　　HTML 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。

　　下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick               当用户点击某个对象时调用的事件句柄。
ondblclick          当用户双击某个对象时调用的事件句柄。
onfocus             元素获得焦点。               //练习：输入框
onblur               元素失去焦点。               
onchange          域的内容被改变。            
onkeydown        某个键盘按键被按下。         
onkeypress        某个键盘按键被按下并松开。
onkeyup            某个键盘按键被松开。
onload               一张页面或一幅图像完成加载。(只给 body元素加)
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout       鼠标从某元素移开。
onmouseover      鼠标移到某元素之上。
onmouseleave     鼠标从元素离开
onselect              文本被选中。
onsubmit            确认按钮被点击。(只能给form元素使用)

　　为节点（元素）附加事件属性的两种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div onclick="alert(123)">点我</div>
<p id="abc">试一试!</p>

<script>
    var ele=document.getElementById("abc");


    ele.onclick=function(){
        alert("hi");
    };

</script>
</body>
</html>

View Code

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.

来源：oschina

链接：https://my.oschina.net/u/4315513/blog/3594046

标签

javascript

element