JS三大核心内容
- 01->DOM document object model
- 02->BOM browser object model
- 03->ECMAScript 核心
DOM对象简介
- 说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等
- DOM就是文档对象模型，文档对象模型就是DOM
- 在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。（这句话对理解DOM操作太重要了）
DOM节点的概念
- 1、根节点：在HTML文档中，html就是根节点
- 2、父节点：一个节点之上的节点就是该节点的父节点，例如h1的父节点就是body，body的父节点就是html
- 3、子节点：一个节点之下的节点就是该节点的子节点，例如h1就是body的子节点
- 4、兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。例如h1和p就是兄弟节点，因为他们拥有相同的父节点body
获取DOM中指定元素
DOM查询操作
01->以类名进行查询
- getElemensByClassName()
- 获取某个name值的元素，用于表单元素
- getElementsByName()方法都是用于获取表单元素
- 与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取
语法：document.getElementsByName("表单元素name值");
举例：
<body>
<input name="web" id="radio1" type="radio" value="HTML"/>
<input name="web" id="radio2" type="radio" value="CSS"/>
<input name="web" id="radio3" type="radio" value="JavaScript"/>
<input name="web" id="radio4" type="radio" value="jQuery"/>
<script type="text/javascript">
alert(document.getElementsByName("web")[0].value);
</script>
</body>
02->以id名进行查询
- getElementById()
语法：document.getElementById("元素id");
-
03->以标签名进行查询
- getElementsByTagName()
-
04->HTML5新增DOM查询方法
- querySelector() ->返回css选择器第一个选中的元素
- querySelectorAll() ->返回css选择器选中的元素的集合
DOM元素查询时需注意的事项
- 01->当个查询方法获取到的是多个元素时，获取到的对象为伪数组，而非正整数组
- 02->通过类名或者标签名等同时可以获取多个元素的方法时，若只需获取第一个元素时，需加上索引
innerHTML和innerText
修改和获取DOM节点内容
- 01->innerHTML 获取和修改节点内部的文本和标签
- 02->outerHTML 获取节点本身
- 03->innerText 获取节点内的文本节点
- 04->outerText 获取节点内的文本节点,和innerText区别在于赋值时会修改标签本身
创建DOM节点
在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去
- 01->document.createElement 创建元素节点
- 02->document.createTextNode 创建文本节点
- 03->document.createAttribute 创建属性节点
语法：
var e = document.createElement("元素名"); //创建元素节点
var t = document.createTextNode("元素内容"); //创建文本节点
e.appendChild(t); //把元素内容插入元素中去
创建复杂节点
<script type="text/javascript">
var e = document.createElement("input");
e.id = "submit";
e.type = "button";
e.value = "提交";
document.body.appendChild(e);
</script>
节点的添加、替换、复制和删除操作
01->添加节点
- appendChild(childNode) ->末尾添加新的子节点
- 在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“末尾”
语法：obj.appendChild(new)
说明：obj表示当前节点，new表示新节点
<head>
<title></title>
<script type="text/javascript">
function insert() {
var e = document.createElement("li"); //创建元素节点
var str = document.getElementById("txt").value; //获取文本框的值
var txt = document.createTextNode(str); //创建文本节点
e.appendChild(txt); //插入文本节点li
var list = document.getElementById("list"); //获取ul
list.appendChild(e); //插入文本节点
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
列项文本：
<input id="txt" type="text" />
<br />
<input type="button" value="插入新项" onclick="insert()" />
</body>
- insertBefore(newNode,existNode) ->节点前添加子节点
- 在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“首位”
语法：obj.insertBefore(new,ref)
说明：obj表示父节点；
new表示新的子节点；
ref指定一个节点，在这个节点前插入新的节点
<head>
<title></title>
<script type="text/javascript">
function insert() {
var e = document.createElement("li"); //创建元素节点
var str = document.getElementById("txt").value; //获取文本框的值
var txt = document.createTextNode(str); //创建文本节点
e.appendChild(txt); //插入文本节点li
var list = document.getElementById("list"); //获取ul
list.insertBefore(e,list.firstChild); //插入文本节点
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
列项文本：
<input id="txt" type="text" />
<br />
<input type="button" value="插入新项" onclick="insert()" />
</body>
- 这里注意一点，appendChild()和insertBefore()这2种插入节点方式都需要获取父节点才能进行操作
02->替换替换节点
- replaceChild(newNode,existNode)
语法：obj.replaceChild(new,old)
说明：obj，表示被替换节点的父节点;
new，表示替换后的新节点;
old，需要被替换的旧节点;
<head>
<title></title>
<script type="text/javascript">
function replace() {
//获取两个文本框的值
var tag = document.getElementById("tag").value;
var txt = document.getElementById("txt").value;
//获取p元素
var lvye = document.getElementById("lvye");
//根据两个文本框的值创建新节点
var e = document.createElement(tag);
var t = document.createTextNode(txt);
e.appendChild(t);
document.body.replaceChild(e, lvye);
}
</script>
</head>
<body>
<p id="lvye">绿叶学习网</p>
<hr /> 输入标签：
<input id="tag" type="text" />
<br /> 输入文本：
<input id="txt" type="text" />
<br />
<input type="button" value="替换" onclick="replace()" />
</body>
- 想要实现替换节点，就必须找到3点：
- （1）新节点；
- （2）被替换的子节点；
- （3）被替换子节点的父节点；
03->复制节点
语法：obj.cloneNode(bool)
说明：参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；
<head>
<title></title>
<script type="text/javascript">
function add() {
var e = document.getElementById("list");
document.body.appendChild(e.cloneNode(1));//复制本身包括子
document.body.appendChild(e.cloneNode(0));//复制本身不包括子
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="添加" onclick="add()" />
</body>
- cloneNode(true/false)
- true 复制当前节点及其所有子节点
- false 仅复制当前节点
04->删除节点
- removeChild(需要删除的节点)
语法：obj.removeChild(oldChild);
说明：参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点
<head>
<title></title>
<script type="text/javascript">
//定义删除函数
function del() {
var e = document.getElementById("list");
//判断元素节点e是否有子节点
if (e.hasChildNodes) {
e.removeChild(e.lastChild); //删除e元素的最后一个子节点
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="删除" onclick="del()" />
</div>
</body>
- 分析：这里“if(e.hasChildNodes)”判断元素节点e是否有子节点。而“e.lastChild”表示获取元素节点额的最后一个子节点
- 假如我们想要把整个列表删除，该如何实现呢?
<head>
<title></title>
<script type="text/javascript">
function del() {
var e = document.getElementById("list");
document.body.removeChild(e);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="删除" onclick="del()" />
</body>
- 分析：当我们点击“删除”按钮时，整个列表都被删除了。我之所以举这两个例子是让大家明白一个知识点，在使用removeChild()方法删除元素之前我们必须找到2点：
（1）被删除的子节点；
（2）被删除子节点的父节点； - 在这个例子中，ul元素的父节点就是body了。
DOM属性操作
- 01->getAttribute(arrtName) 获取属性
- 02->setAttribute(attrName,attrValue) 设置属性
- 03->removeAttribute(arrtName) 删除属性
节点指针
- 01->firstChild 获取父节点的首个子节点
- 02->lastChild 获取父节点的最后一个子节点
- 03->childNodes 获取父节点的所有子节点
- 04->previousSibling 获取已知节点的前一个兄弟节点
- 05->nextSibling 获取已知节点的后一个兄弟节点
- 06->parentNode 获取已知节点的父节点
DOM节点的信息
01->nodeType节点类型的常数值
元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点 Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点 Node.ENTITY_NODE(6)
处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点 Node.COMMENT_NODE(8)
文档节点 Node.DOCUMENT_NODE(9)
文档类型节点 Node.DOCUMENT_TYPE_NODE(10)
文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)
02->nodeName 节点的名称
03->nodeValue 当前节点的值，格式为字符串
获取DOM元素的css样式
01->获取行间样式
- dom.style.(color)数项名 通过元素的style属性直接获取
02->获取非行间样式
- dom.currentStyle.width/height/... 兼容早期IE
- getComputedStyle(dom,null).width/height/... 兼容非IE
