在html文档对象模型,html--JavaScript之DOM (文档对象模型)

一、简介

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。

二、查找元素

2.1、直接查找

方法名

描述

document.getElementById("id")

获取有指定惟一ID属性值文档中的元素

document.getElementsByTagName("tab")

返回当前元素中有指定标记名的子元素的数组

document.getElementsByClassName("name")

根据class属性获取标签集合

document.getAttribute("title")

返回元素的属性值，属性由name指定

2.2、间接查找

属性名

描述

childNodes

返回当前元素的所有子元素

firstChild

返回当前元素的第一个下级子元素

lastChild

返回当前元素的最后一个子元素

nextSibling

返回紧跟在当前元素后面的元素

previousSibling

返回紧跟在当前元素前面的元素

parentElement

返回其父节点标签元素

children

返回其所有子标签

firstElementChild

返回第一个子标签元素

lastElementChild

返回最后一个子标签元素

nextElementtSibling

返回下一个兄弟标签元素

previousElementSibling

返回上一个兄弟标签元素

三、操作元素

3.1、动态创建内容时所用的W3C DOM属性和方法

属性/方法

描述

document.createElement_x(tagName)

文档对象上的createElement_x方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素

document.createTextNode(text)

文档对象的createTextNode方法会创建一个包含静态文本的节点

.appendChild(childNode)

appendChild方法将指定的节点增加到当前元素的子节点列表(作为一个新的子节点)。

.setAttribute(name, value)

这些方法分别获得和设置元素中name属性的值

.insertBefore(newNode, targetNode)

将节点newNode作为当前元素的子节点插到targetNode元素前面

.removeAttribute(name)

这个方法从元素中删除属性name

.removeChild(childNode)

这个方法从元素中删除子元素childNode

.replaceChild(newNode, oldNode)

这个方法将节点oldNode替换为节点newNode

.hasChildnodes()

这个方法返回一个布尔值，指示元素是否有子元素

3.2、标签内容

innerText 获取标签文本内容

innerHTML 获取HTML内容

value 获取值，即form提交表单的值

示例：

1111

2222

document.getElementsByClassName("yu").innerHTML = 456; //获取类名为yu的标签并把内容改为456

document.getElementsByClassName("sheng").value = "你好"; //获取类名为sheng的标签并把内容改为你好

3.3、属性

attributes // 获取所有标签属性

setAttribute(key,value) // 设置标签属性

getAttribute(key) // 获取指定标签属性

示例：通过自定义属性可以做一个全选，反选，取消选择的案例

选择练习

我的爱好：

游泳篮球台球

check.checked=true;

}

}

function Canclall() {var target = document.getElementsByClassName("ck");for(var i = 0; i < target.length; i++){var check =target[i];

check.checked = false;

}

}

function Recvall() {var target = document.getElementsByClassName("ck");for(var i = 0; i < target.length; i++){var check =target[i];if(check.checked){

check.checked = false;

}else{

check.checked = true;

}

}

}

原文：https://www.cnblogs.com/june-L/p/11901866.html