HTML DOM

标签：3.4   关于   remove   alert   字符串   lock   innertext   w3c   tts   

1、什么是HTML DOM？

　　HTML DOM是：

　　　　HTML 的标准对象模型；

　　　　HTML 的标准编程接口；

　　　　W3C 标准。

　　HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法（接口）。

　　换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

2、HTML节点树

　　根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：0

　　　　整个文档是一个文档节点

　　　　每个 HTML 元素是元素节点

　　　　HTML 元素内的文本是文本节点

　　　　每个 HTML 属性是属性节点

　　　　注释是注释节点

　　具体参见：http://www.runoob.com/htmldom/htmldom-nodes.html

3、获取标签与操作标签

3.1、document

　　document指整个HTML文档。

3.2、直接获取标签

3.2.1、获取单个标签

　　getElementById()：返回带有指定 ID 的元素。

3.2.2、获取多个元素（列表）

　　document.getElementsByTagName(‘div‘)：根据标签名获取标签集合；

　　document.getElementsByClassName(‘c1‘)：根据class属性获取标签集合；

　　document.getElementsByName ("myInput")：根据name属性获取标签集合。

3.3、间接获取标签

　　注意：标签是指HTML中的标签，如<a>,<div>,<span>等；节点指标签中的子标签和字符串，下面代码中"a","b","c","d"分别属于不同的子节点。根据下图中获取的id为"i1"的子节点来看，子节点0中除了字符串"a"外还包括空格。

 <div id="i1">"a"
        <div>购物</div>"b"
        <div>游戏</div>"c"
        <div>视频</div>"d"
 </div>

3.4、操作标签

3.4.1、标签中的文本内容（innerText）

　　获取标签中的文本内容：var text = tag.innerText；

　　对标签内部文本进行赋值：tag.innerText="abc" 。

3.4.2、className属性

　　直接整体做操作：tag.className = "c1"。

3.4.3、classList属性

　　添加指定样式：tag.classList.add("c2")；

　　删除指定样式：tag.classList.remove("c2") 。

3.4.4、checkbox

　　获取checkbox对象： var checkbox = tag.checked；

　　设置checkbox对象值： checkbox.checked = false， checkbox.checked = true。

4、事件

4.1、定义事件

<div onclick="func(123)"> </div>

4.2、定义事件处理函数

<script>
　　function func(a) {
　　　　alert(a);
　　}
</script>

HTML DOM

标签：3.4   关于   remove   alert   字符串   lock   innertext   w3c   tts   

原文地址：https://www.cnblogs.com/bad-robot/p/9316550.html