<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body class='aa'>
<form>
<input id='i1' type='text'/>
<p>aaasssssssss</p>
<ol>
<li id="li1">Coffee</li>
<li>Milk</li>
</ol>
</form>
<script>
/**
alert(document.documentElement.childNodes.length);
alert(document.documentElement.childNodes[1].attributes.length);
alert(document.documentElement.childNodes[1].attributes[0].nodeName);
alert(document.documentElement.childNodes[1].attributes[0].nodeValue);
alert(document.documentElement.childNodes[1].attributes('class').nodeValue);
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].textContent)//可能浏览器不支持
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerText)
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerHTML)
alert(document.getElementsByTagName('p')[0].innerText);
alert(document.getElementsByNodeName('p')[0].innerText);
alert(document.body.previousSibling.nodeName);
var my=document.getElementById('i1');
alert(my.nextSibling.nodeName);
**/
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
a.style.fontWeight='bold';
</script>
</body>
</html>
1：查看属于自己的，nodeType,nodeName,nodeValue
<script>
alert(document.nodeType);
alert(document.nodeName);
alert(document.nodeValue);
</script>
2:documentElement
3:元素的名称
alert(document.documentElement.nodeName);
alert(document.documentElement.tagName);
4：子节点
alert(document.documentElement.hasChildNodes());
alert(document.documentElement.childNodes.length);
alert(document.documentElement.childNodes[0].tagName)；//head
5:属性
alert(document.documentElement.childNodes[1].hasAttributes());
alert(document.documentElement.childNodes[1].attributes.length);
alert(document.documentElement.childNodes[1].attributes[0].nodeName); //属性名称
alert(document.documentElement.childNodes[1].attributes[0].nodeValue);//属性内容
alert(document.documentElement.childNodes[1].attributes('class').nodeValue);//获取指定属性的内容
6：访问标签的内容
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].nodeName)
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].textContent)//可能浏览器不支持
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerText)
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerHTML)
nodeName与tagName的区别
nodeName所有节点的名称都可以出来
tagName只有元素的名称可以出来，有些节点的名称可能不出来，还是用nodeName好哦
7：dom访问的快捷方法
通过childNodes,parentNode,nodeName,nodeValue,attributes这些属性，可以在dom树结构上实现自由导航，并出来相关的文档操作
document.getElementsByTagName('p')[0]; //通过TagName寻找
getElementByClassName(); // 通过元素的class属性寻找元素
querySelector();//通过css选择器的方式寻找元素（找第一个）
querySelectorAll();//通过css选择器的方式寻找元素（找全部）
8：兄弟节点，及首尾节点
document.body.nextSibling;--null
document.body.previousSibling;---<head>---</head>
alert(document.body.previousSibling.nodeName);
var my=document.getElementById('i1');
alert(my.nextSibling.nodeName);
9:dom节点修改
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
我们还可以通过nodeValue=‘xxx’;来修改文本的值
10：样式修改
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
a.style.fontWeight='bold';//修改样式
11：新增节点
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
a.style.fontWeight='bold';
document.body.appendChild(a);
12：移除节点
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
a.style.fontWeight='bold';
document.body.appendChild(a);
document.body.removeChild(a);
13：事件
内联HTML属性写法
<div onclick='alert(111)'>click</div>
元素属性法
<div id='div1'>click</div>
</body>
<script>
var mydiv=document.getElementById("div1");
mydiv.onclick=function(){
alert("div1");
}
</script>
</html>
事件监听（有的浏览器可能不支持）
<div id='div1'>click</div>
</body>
<script>
var mydiv=document.getElementById("div1");
mydiv.addEventListener('click',function(){
alert(111);
});
</script>
js事件捕捉，和事件冒泡
js闭包在网上收索看看
4对象
var dog={
a:a,
b:b,
c:function(){
}
}
访问对象，dog['a'] 或者dog.a
调用对象中的方法，dog.c();或者dog['c']();
修改属性 dog.a='b';修改方法 dog.c=function(){
xxxxxxxxxx
}
删除一个属性
delete dog.a;
用构造器创建对象用new关键字
function hero(){
this.occupation='nianja';
}
var h=new hero();
h.occupation;
5:原型（待续）
5.1 js都是引用传递，java是值传递
6:继承（待续）
相关推荐
jsdom就是基于Node.js的，利用其非阻塞I/O和事件驱动的特性来高效地处理DOM操作。 **DOM**: 文档对象模型 DOM是W3C标准，用于表示XML和HTML文档的一种编程接口。它将文档解析为一棵由节点构成的树形结构，每个节点...
1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考
- **优化性能**：由于精简了部分功能，`jsdom-little` 在处理大量文档或执行复杂操作时，可能会比`jsdom`有更高的性能表现。 **应用场景** 1. **单元测试**：在Node.js环境中，用`jsdom-little` 模拟浏览器环境...
本实践项目“js_HTML_Dom操作练习”旨在帮助初学者熟悉DOM的基本操作，包括查找、修改和添加网页元素。在这个过程中，我们将探讨几个关键的DOM接口和方法，以加深对JavaScript与HTML交互的理解。 1. **获取元素**：...
2. **DOM 操作**：与浏览器中的 DOM API 类似，JSDOM 支持各种元素的增删改查操作。例如，可以通过 `document.createElement()`, `element.appendChild()`, `element.setAttribute()` 等方法创建和修改元素。 3. **...
JSDOM是Node.js的一个库，它提供了一个完整的DOM实现，使得在服务器端也能进行DOM操作。这对于测试、页面预渲染、数据提取等场景非常有用。使用JSDOM，你可以像在浏览器环境中一样，通过JavaScript操作DOM，例如解析...
用户可以像在浏览器环境中一样，通过jsdom来解析HTML字符串，执行DOM操作，并获取结果。 “工具”的标签暗示了JS DOM在开发中的实用价值。开发者可以利用DOM来实现各种功能，如事件处理（`addEventListener`、`...
本篇内容将会介绍JavaScript中DOM操作的基本概念和方法，以及如何处理文本节点中的空格问题。 ### DOM操作实现代码 首先，通过提供的代码段，我们可以看到如何利用DOM操作获取和修改页面元素。比如，使用`document...
《基于HTML CSS JS DOM操作的骰子游戏解析》 在当今的互联网世界中，JavaScript作为浏览器端的主要编程语言，有着广泛的应用。本篇文章将详细解析一个名为“Dice-Game”的项目，该项目是利用HTML、CSS和JavaScript...
在这个名为“Pig-Game”的JS小项目中，DOM操作扮演了关键角色，实现了用户交互和游戏逻辑的结合。 项目的核心在于利用JavaScript操控DOM元素，构建一个互动的猪游戏。猪游戏是一种策略游戏，玩家轮流投掷骰子，获得...
通过`jsdom`，开发者可以在服务器端模拟浏览器环境，执行JavaScript，进而获取和操作DOM。这对于预渲染至关重要，因为我们需要在没有实际浏览器的情况下运行SPA的JavaScript代码，生成完整的HTML页面。 接着，我们...
jsdom的使用则可以帮助开发者在服务器端操作和测试DOM，这对于自动化测试和爬虫项目尤其有用。 BOM（Browser Object Model）是浏览器提供的API，允许JavaScript与浏览器进行交互，比如改变窗口大小、位置，管理历史...
"原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先，我们需要了解什么是DOM，以及如何使用JavaScript来操作DOM。 DOM（Document Object Model，文档对象...
在这个"JS DOM pink教程源码"中，我们可以深入理解DOM操作的核心概念和技巧。 首先，我们需要了解DOM的基本概念。在JavaScript中，`document`对象是DOM的根，包含了整个网页的所有元素。通过这个对象，我们可以获取...
"jsdom"是JavaScript的一个库，它模拟了浏览器的DOM环境，使得开发者可以在Node.js环境中操作DOM，这对于服务器端渲染、自动化测试、爬虫等场景非常有用。JSDOM提供了与浏览器DOM类似的API，例如`document....
3. **DOM操作** - 属性操作：通过`getAttribute()`和`setAttribute()`改变元素的属性值。 - 文本内容操作：`innerHTML`和`textContent`属性用于获取或设置元素内部的HTML或纯文本。 - 风格操作：利用`style`对象...
通过这个小练习，不仅可以巩固JavaScript和DOM的基础知识，还能提升对用户交互和数据管理的理解，同时，对于理解服务器端环境如何模拟浏览器中的DOM操作也有一定的帮助。这样的练习对于前端开发者的技能提升是非常有...