当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
改变HTML输出流:
注意
:绝对不要在文档加载完成之后使用document.write()。这会覆盖文档
1. 获取 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素
-
通过 id 找到 HTML 元素
document.getElementById()
示例:
<div id="my-id"></div>
<script type="text/javascript">
var idDom = document.getElementById("my-id");
</script>
- 通过标签名找到 HTML 元素
document.getElementsByClassName()
注意: 这个语法.getElements
后面多个 s
是复数。也就是说id
只能是唯一的一个,而class
可以是多个
<div class="my-class"></div>
<script type="text/javascript">
var classDom = document.getElementsByClassName("my-class");
</script>
- 通过类名找到 HTML 元素
document.getElementsByTagName()
注意: 这个getElements
一样是复数,原理同上
<div></div>
<script type="text/javascript">
var tagDom = document.getElementsByTagName("div");
</script>
- 通过name属性找到 HTML 元素
document.getElementsByName()
注意: 元素必须含有name属性
这个getElements
一样是复数,原理同上
<input name="my-name" type="text" size="20" />
<script type="text/javascript">
var nameDom = document.getElementsByName("my-name");
</script>
2. 操作HTML内容
innerHTML
:读取HTML内容, 不包含自身标签内容 ; 操作也是同样不会操作自身标签
<div>
<div id="my-id">
我是my-id
<div>子级标签</div>
</div>
</div>
<script type="text/javascript">
var idDom = document.getElementById("my-id");
//整个节点里面所有属性和内容全部输出: <div id="my-id">... 其中包含innerHTML属性
console.log(idDom);
//获取它的HTML内容
var getHtml = document.getElementById("my-id").innerHTML;
console.log(getHtml); //内容输出: 我是my-id <div>子级标签</div
//操作HTML,把节点内换成下面的内容,包括子级标签; 不会操作自身标签。
document.getElementById("my-id").innerHTML="<p>我是p标签</p>";
</script>
outerHTML
: 读取HTML内容,包含自身的HTML标签内容; 会操作自身标签
<div>
<div id="my-id">
我是my-id
<div>子级标签</div>
</div>
</div>
<script type="text/javascript">
var getHtml = document.getElementById("my-id").outerHTML;
console.log(getHtml); //内容输出: <div id="my-id">我是my-id<div>子级标签</div> </div>
//操作HTML,把自身节点和里面内容换成下面的内容,包括子级标签; 会操作自身标签。
document.getElementById("my-id").outerHTML="<p>我是p标签</p>";
</script>
3. 获取元素文本
- innerText
<div>
<div id="my-id">
我是my-id
<div>子级标签</div>
</div>
</div>
<script type="text/javascript">
var getText = document.getElementById("my-id").innerText;
console.log(getText); //内容输出: 我是my-id 子级标签
//操作文本,把节点内换成下面的内容,包括子级标签; 不会操作自身标签。
document.getElementById("my-id").innerText="我是被替换的文本";
</script>
- outerText
<div>
<div id="my-id">
我是my-id
<div>子级标签</div>
</div>
</div>
<script type="text/javascript">
var getText = document.getElementById("my-id").innerText;
console.log(getText); //内容输出: 我是my-id 子级标签
//操作文本,把节点内换成下面的内容,包括子级标签; 会操作自身标签。
document.getElementById("my-id").outerText="我是被替换的文本";//Firefox不支持
</script>
4.操作HTML元素属性
- element.属性名
document.getElementById().属性名
document.getElementById().属性 = 值
document.getElementById().style.属性 = 值
document.getElementById(id).className=值
- 注意 获取属性名时如果遇到连字符“
-
” 就去掉连字符 第二个单词变为大写,也就是驼峰命名方式
获取 - 获取class属性的值时 .className
<div id="box" class="classbox">
这是段落标签
</div>
<script>
var getId = document.getElementById("box").id;//id
//css 样式 后面跟什么样式可以设置什么样式
var getCss = document.getElementById("box").style;
//设置box的背景颜色为 红色
var setBac = document.getElementById("box").style..backgroundColor='red';
var getClass = document.getElementById("box").className;//class
console.log(getId); // 输出 : box
console.log(getClass); // 输出 : classbox
//改变元素的属性 , 设置属性id的值为set-id <div id="set-id" class="classbox">
//其他属性设置方式同上
document.getElementById("box").id = 'set-id';
</script>
- element.getAttribute(属性名)
获取值:
document.getElementById().getAttribute(属性名)
可以直接获取id 、class 、 style
设置:document.getElementById().setAttribute(属性,值);
<div id="box" class="classbox">
这是段落标签
</div>
<script>
var getId= document.getElementById("box").getAttribute("id");
console.log(getId); // 输出 : box
改变元素的属性 , 设置属性id的值为set-id <div id="set-id" class="classbox">
document.getElementById("box").setAttribute("id","set-id");
</script>
- 移除HTML元素属性
document.getElementById(id).removeAttribute(name)
可以移除原有属性,也可以移除自定义属性
<!--移除元素-->
<div id="box" class="classbox" myNewAttr="我的自定义属性">
这是一段测试内容
</div>
<script>
//移除元素
var getNewAttr = document.getElementById("box").removeAttribute("myNewAttr");
console.log(getNewAttr);//查看元素属性已经移除 输出: undefined
</script>
- 属性功能区分
两种方式都可以获取对应属性的值,但是区别也很明显。
dom对象只能获取HTML内置标准属性
的值,比如id或者title,对于自定义属性返回值为undefined。
getAttribute方法则能力更加强大
,可以操作到自定义属性内容
getAttribute方法只能获取标签元素的属性
,如果是象css样式中的属性,则不可已获取。
<div id="box" class="classbox" myNewAttr="我的自定义属性">
这是一段测试内容
</div>
<script>
var getNewAttr = document.getElementById("box").getAttribute("myNewAttr");
console.log(getNewAttr);//输出: 我的自定义属性
var getNewAttr2 = document.getElementById("box").myNewAttr;
console.log(getNewAttr2);//输出: undefined
</script>
5. 创建、追加、克隆、删除节点
- 追加节点
document.createElement(nadename)
: 方法通过指定名称创建一个元素节点
document.createTextNode()
: 创建文本节点
document.getElementById(对象id).appendChild(节点内容)
:方法可向节点的子节点列表的末尾添加新的子节点
insertBefore()
方法可在已有的子节点前
插入一个新的子节点
node.insertBefore(newnode,existingnode)
newnode
节点对象 必须。要插入的节点对象
existingnode
节点对象 必须。要添加新的节点前的子节点。
<textarea name="" id="text" cols="30" rows="10">hello</textarea>
<ul id="message-list">
<li>我是自带留言1</li>
<li>我是自带留言2</li>
</ul>
<button onclick="getMessage()">追加节点</button>
<script>
//追加节点事件内容
function getMessage() {
//1. 获取文本域输入的内容;
var text = document.getElementById("text").value;
//2. 首先创建 <li> </li> 节点
var node = document.createElement("li");
//3. 创建文本节点
var textnode = document.createTextNode(text);
//4. 然后把这个文本节点追加到 <li> textnode </li> 节点。
node.appendChild(textnode);
//5. 最后把 <li> textnode </li> 节点添加到列表中。
document.getElementById("message-list").appendChild(node);
//节点前插入元素
var list = document.getElementById("message-list");
//childNodes[0]: 需要添加节点的索引为0的子元素 ,也就是第一个 。
list.insertBefore(node,list.childNodes[0]);
}
</script>
- 克隆
node.cloneNode(布尔值)
:方法可创建指定的节点的精确拷贝,方法 拷贝所有属性和值
布尔值参数:可选。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。
<div id="my-div">one 节点</div>
<div id="my-div2">
two 节点
<div>
two 节点的子节点
</div>
</div>
<button onclick="getMessage()">克隆</button>
<script>
function getMessage() {
//获取one 节点
var one = document.getElementById("my-div");
//获取two 节点
var two = document.getElementById("my-div2");
//克隆 two 节点
var copytwo = two.cloneNode(true);
//向one 节点内添加克隆的元素
one.appendChild(copytwo);
}
</script>
- 删除节点
node.removeChild(node)
:removeChild()
方法可从子节点列表中删除某个节点,如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
node
节点对象 必须。 你要移除的节点对象
<ul id="my-div">
<li>我是自带留言1</li>
<li>我是自带留言2</li>
</ul>
<button onclick="setDelete()">删除节点</button>
<script>
function setDelete() {
var one = document.getElementById("my-div");
one.removeChild(one.childNodes[0])
}
</script>
6. 实战示例汇总
//一、获取HTML元素
document.getElementById(); //获取的是iD元素
document.getElementsByName();//通过name值获取元素
document.getElementsByTagName();//通过标签
document.getElementsClassName();//通过类名称
//二、读取HTML元素内容
document.getElementById().innerHTML;
document.getElementById().outerHTML;
//三、设置HTML元素内容
document.getElementById().innerHTML='值';
document.getElementById().outerHTML='值';
var box = document.getElementById();
box.innerHTML='值';
var box = document.getElementById();
box.outerHTML='值';
//获取元素文本
document.getElementById("").innerText;
document.getElementById("").outerText;
// 设置元素文本
document.getElementById("").innerText='值';
document.getElementById("").outerText='值';
// 获取元素的属性
document.getElementById("").id;
document.getElementById("").className;
document.getElementById("").value;
document.getElementById("").type;
document.getElementById().getAttribute("id");
document.getElementById().getAttribute("name");
document.getElementById().getAttribute("class");
document.getElementById().getAttribute("type");
document.getElementById().getAttribute("value");
//设置元素的属性
document.getElementById("").id= '值';
document.getElementById("").className= '值';
document.getElementById("").value= '值';
document.getElementById("").type= '值';
document.getElementById().setAttribute("id","value");
document.getElementById().setAttribute("name","value");
document.getElementById().setAttribute("class","value","value");
document.getElementById().setAttribute("type","value");
document.getElementById().setAttribute("value","value");
//移除HTML元素属性
document.getElementById("box").removeAttribute("id");
// 获取HTML元素的样式
// document.getElementById().style.backgroundColor;
// var box = document.getElementById("box").style.backgroundColor;
var box = document.getElementById("box");
box.style.backgroundColor="yellow";
box.style.fontSize="26px";
// 通过setAttribute方式批量设置CSS样式
box.setAttribute("style","background-color:yellow;font-size:26px;color:#fff");
// 添加节点
//1. 获取文本域输入的内容;
var text = document.getElementById("text").value;
//2. 创建节点
var node = document.createElement("li");
//3. 创建文本节点
var textnode = document.createTextNode(text);
//4. 然后把这个文本节点追加到节点。
node.appendChild(textnode);
//5. 最后把节点添加到元素中。
document.getElementById("message-list").appendChild(node);