JavaScript学习（七） DOM对象

当网页被加载时，浏览器会创建页面的文档对象模型（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);

JavaScript学习（七） DOM对象

1. 获取 HTML 元素

2. 操作HTML内容

3. 获取元素文本

4.操作HTML元素属性

5. 创建、追加、克隆、删除节点

6. 实战示例汇总

相关推荐