javaScript中Dom编程

关注

原创最新推荐文章于 2026-02-06 16:29:01 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

《JavaScript DOM 编程艺术》（第2版）之读后感悟在阅读完第一本书——《JavaScript DOM编程艺术》之后，有一些自己的感悟和理解，顺带把书中的一些常用的原生JS所写的方法罗列出来，以供参考和使用。阅读详情

Dom编程

概念

dom: document object model 文档对象模型

DOM技术：

php里边有：php语言与 xml/html标签之间沟通的一个桥梁。

javascript里边有：js语言与 html/xml标签之间沟通的一个桥梁。

为了方便javascript语言通过dom操作html比较方便，

把html标签的内容划分为各种节点：

文档节点(document)

元素节点

文本节点

属性节点

注释节点

dom就是学习利用javascript如何实现对html标签内容的增、删、改、查等操作

获取元素节点

具体操作方法：

document.getElementById(id属性值);

document.getElementsByTagName(tag标签名称);

document.getElementsByName(name属性值);不推荐，有浏览器兼容问题,通常应用在form表单里边。

案例一：

<html>

<body>

<h2>获取元素节点</h2>

</body>

</html>

//① document.getElementById(); id属性值获得元素节点

var name = document.getElementById('username');

console.log(name);

var email = document.getElementById('useremail');

console.log(email);

</script>

案例二：

//② document.getElementsByTagName(tag标签名); tag标签名称获得元素节点

var hh = document.getElementsByTagName('h2');

console.log(hh);//HTMLCollection[h2]

//通过 getElementsByTagName 收集的元素节点以"集合/数组"(即时只有一个节点)的形式返回

console.log(hh[0]);

var its = document.getElementsByTagName('input');

console.log(its);//HTMLCollection[input#username 属性(attribute)值 = "tom", input#useremail 属性(attribute)值 = "tom@163.com"]

console.log(its[1]);//访问具体节点

console.log(its.item(0));//访问具体节点

</script>

案例三：

<body>

<h2>获取元素节点</h2>

<div>today is very good</div>

</body>

</html>

//③ document.getElementsByName(name属性值); name属性值获得元素节点

//通过 getElementsByTagName 收集的元素节点以"集合/数组"(即时只有一个节点)的形式返回

var it = document.getElementsByName('username');

console.log(it); //NodeList[input 属性(attribute)值 = "tom"]

console.log(it[0]);//<input type="text" value="tom" name="username">

console.log(it.item(0));//<input type="text" value="tom" name="username">

</script>

获取文本节点

<div>hello</div>

需要借助div元素节点再获得其内部的文本节点.

var dvnode = document.getElementsByTagName(‘div’)[0];

dvnode.firstChild; //(或调用lastChild)获得元素div内部的第一个子节点对象

<body>

<h2>文本节点获取</h2>

<div>today is very good</div>

</body>

</html>

//获得div内部的文本节点

var dv = document.getElementsByTagName('div')[0];

//firstChild获得第一个子节点/lastChild获得最后一个子节点

console.log(dv.firstChild);//<TextNode textContent="today is very good">

console.log(dv.firstChild.nodeType);//3

console.log(dv.firstChild.wholeText);//today is very good //获得文本信息

</script>

兄弟节点

firstChild、lastChild:父节点获得第一个/最后一个子节点

nextSibling:获得下个兄弟节点

previousSibling:获得上个兄弟节点

childNodes:父节点获得内部全部的子节点信息

以上属性在主流浏览器(火狐firefox、chrome、safari、opera)中会给考虑空白节点。在IE浏览器中不考虑。

<body>

<h2>兄弟节点获取</h2>

<ul>

<li>green</li>

</ul>

</body>

</html>

var ull=document.getElementsByTagName('ul').item(0);

console.log(ull.childNodes);

console.log(ull.childNodes.length);//7

console.log(ull.firstChild);//#text

console.log(ull.firstChild.nextSibling);//<li>red</li>

console.log(ull.lastChild);//#text

console.log(ull.lastChild.previousSibling);//<li>green</li>

</script>

父节点

.parentNode

<body>

<h2>兄弟节点获取</h2>

<ul>

<li>green</li>

</ul>

</body>

</html>

var blue=document.getElementsByTagName('li')[1];

console.log(blue.parentNode);//ul

console.log(blue.parentNode.parentNode);//body

console.log(blue.parentNode.parentNode.parentNode);//html

console.log(blue.parentNode.parentNode.parentNode.parentNode);//htmldocument

console.log(blue.parentNode.parentNode.parentNode.parentNode.parentNode);//null

</script>

属性值操作

① 获取属性值

itnode.属性名称; //只能操作w3c规定的属性

itnode.getAttribute(属性名称); //规定的和自定义的都可以获取

② 设置属性值

itnode.属性名称 = 值; //只能操作w3c规定的属性

itnode.setAttribute(名称，值); //规定的和自定义的都可以设置

<body>

<h2>属性值操作</h2>

</body>

</html>

var baidu = document.getElementsByTagName('a')[0];

//① 获得属性的信息

console.log(baidu.href);

console.log(baidu.target);

console.log(baidu.className);//apple /className是class的一个别名，不可以直接访问class属性

console.log(baidu.addr);//undefined

console.log(baidu.getAttribute('href'));//http://www.baidu.com

console.log(baidu.getAttribute('addr'));//beijing

console.log(baidu.getAttribute('target'));//_blank

//② 设置属性的信息

function f1(){

baidu.href = "http://www.163.com";

baidu.target = "_self";

baidu.addr = "tianjin";

//属性修改有就更新、没有就创建

baidu.setAttribute('addr','shanghai');

baidu.setAttribute('height','170');//新创建

}

</script>

属性节点的获取

var attrlist = itnode.attributes; //返回对应节点内部的全部属性信息，数组列表形式返回

attrlist.属性名称; //获得具体属性节点

获得节点类型nodeType：

1------> 元素节点

2------> 属性节点

3------> 文本节点

9------> 文档节点

<body>

<h2>属性节点获取</h2>

</body>

</html>

var name = document.getElementById('username');

var attrs = name.attributes;//把name元素节点对象的全部属性以"数组"形式给返回出来

console.log(attrs);//[type="text", id="username", class="orange", value="tom", name="username"]

console.log(attrs.id); //获得id"属性节点" id="username"

console.log(attrs.class); //获得id"属性节点" class="orange"

console.log(attrs.class.nodeType); //2

console.log(name.nodeType); //1

//节点.nodeType:判断节点类型 1->元素节点 2->属性节点 3->文本节点 9->document节点

</script>

节点的创建和追加

节点创建

元素节点：document.createElement(tag标签名称);

文本节点：document.createTextNode(文本内容);

属性设置：node.setAttribute(名称，值);

节点追加：

父节点.appendChild(子节点);

父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边

父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

<body>

<h2>节点创建和追加</h2>

</body>

</html>

/**

<ul>

<li mean="生机">green</li>

</ul>

var color = ['red','blue','green'];

var color_mean = ['热情','冷静','生机'];

//创建各种节点

var ull = document.createElement('ul');

for(var k in color){

var lii = document.createElement('li');

lii.setAttribute('mean',color_mean[k]);

var txt = document.createTextNode(color[k]);

//节点追加

lii.appendChild(txt);

ull.appendChild(lii);

}

//document.getElementsByTagName('body')[0].appendChild(ull);

document.body.appendChild(ull);

</script>

节点复制操作

被复制节点.cloneNode(true/false);

true:深层复制

false:浅层复制

<div id=”apple”>hello</div>

<body>

<h2>节点复制追加</h2>

<ul>

<li mean="生机">green</li>

</ul>

<ul>

<li mean="饿">orange</li>

</ul>

</body>

</html>

var blue = document.getElementsByTagName('li')[1];

var fu_blue = blue.cloneNode(true);//深层复制(本身和内部子节点都复制)

var fu_blue = blue.cloneNode(false);//浅层复制(本身(包括属性)节点给复制)

//把复制的fu_blue追加到第二个ul里边

var second_ul = document.getElementsByTagName('ul')[1];

second_ul.appendChild(fu_blue);

</script>

节点删除

父节点.removeChild(子节点);

<body>

<h2>节点删除操作</h2>

<ul>

<li mean="生机">green</li>

</ul>

<ul>

<li mean="饿">orange</li>

</ul>

</body>

</html>

//删除green节点

var green = document.getElementsByTagName('li')[2];

var red = document.getElementsByTagName('li')[0];

green.parentNode.removeChild(green);

red.parentNode.removeChild(red);

</script>

dom操作css属性

① 获取css样式

元素节点.style.css样式名称;

divnode.style.width; //获取宽度样式

② 设置css样式(有则修改、没有则添加)

元素节点.style.css样式名称 = 值;

divnode.style.width =‘500px’;设置div宽度样式

注意：

① dom操作css样式只能操作“行内样式”(css样式分为行内、内部、外部)

② 操作属性样式例如background-color/border-left-color，

需要变为backgroundColor、borderLeftColor，中恒线去掉，后边首字母大写。

<body>

<h2>操作css样式</h2>

<div style="width:300px; height:200px; background-color:lightblue;">利用dom操作css</div>

</body>

</html>

var dv = document.getElementsByTagName('div')[0];

function f1(){

//获取

console.log(dv.style.width);//300px;

console.log(dv.style.height);//200px

console.log(dv.style.backgroundColor);//lightblue

}

function f2(){

//设置(有则更新，没有就创建)

dv.style.color = "red";

dv.style.backgroundColor = "lightgreen";

dv.style.width = "600px";

}

</script>

收录于

[---js+ajax---]

标签

#javascript #dom #css #css3 #html5

JavaScript DOM编程 # 二接下来研究一下如何局部加载新的内容——使用Ajax。这里我们引入Ajax，实现页面中的局部更新。(注意同源策略) ajax.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Ajax</title> </head>... 阅读详情

javaScript中Dom编程

Dom编程

概念

获取元素节点

获取文本节点

兄弟节点

父节点

属性值操作

属性节点的获取

节点的创建和追加

节点复制操作

节点删除

dom操作css属性

相关推荐