2018-1-8dom内容

最新推荐文章于 2023-02-08 17:12:49 发布

dbk1213

最新推荐文章于 2023-02-08 17:12:49 发布

阅读量51

点赞数

原文链接：http://www.cnblogs.com/dns6/p/8244840.html

版权

　　今天整理一下有关dom学习的相关内容。

文档对象模型dom：document object model

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

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

文档节点(document)---body；

元素节点----标签；

文本节点---内容；

属性节点---属性；

注释节点---注释；

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

元素节点获取具体操作方法：

document.getElementById(id属性值唯一);

document.getElementsByTagName(tag标签名称);

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

通过getElementsByTagName收集的元素节点以“集合、数组”（即时只有一个节点）的形式返回

文本节点获取

<div>hello</div>

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

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

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

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

nextSibling:获得下个兄弟节点

previousSibling:获得上个兄弟节点

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

console.log(ull.childNodes.length); //7（节点个数）

console.log(ull.firstChild);　　//第一个节点
console.log(ull.firstChild.nextSibling);　　//<li>red</li>第一个节点后面一个的节点

console.log(ull.lastChild);　　//<TextNode textContent="\n ">最后一个节点
console.log(ull.lastChild.previousSibling);　　//<li>green</li>最后一个节点前面一个的节点

父节点的获取

<body>
　　<h2>父节点获取</h2>
　　<ul>
　　　　<li>red</li>
　　　　<li>blue</li>
　　　　<li>green</li>
　　</ul>
</body>

var blue = document.getElementsByTagName('li')[1];
console.log(blue);//<li>blue</li>
console.log(blue.parentNode);//<ul>
console.log(blue.parentNode.parentNode);//<body>

</script>

操作属性：

<body>
　　<h2>属性值操作</h2>
　　<a href="http://www.baidu.com" addr='beijing' target="_blank" class="apple">百度</a><br >
　　<input type="button" value="修改属性" οnclick="f1()" ><br >
</body>
</html>
<script type="text/javascript">
var baidu = document.getElementsByTagName('a')[0];
① 获得属性的信息

getAttribute
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'));
console.log(baidu.getAttribute('addr'));
console.log(baidu.getAttribute('target'));

② 设置属性的信息

setAttributefunction f1(){

baidu.href = "http://www.163.com";
baidu.target = "_self";
baidu.addr = "tianjin";
属性修改有就更新、没有就创建
baidu.setAttribute('addr','shanghai');
baidu.setAttribute('height','170');　　//新创建
}

转载于:https://www.cnblogs.com/dns6/p/8244840.html

dbk1213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2018-1-8dom内容

　　今天整理一下有关dom学习的相关内容。文档对象模型dom：document object model为了方便javascript语言通过dom操作html比较方便，把html标签的内容划分为各种节点：文档节点(document)---body；元素节点----标签；文本节点---内容；属性节点---属性；注释节点---注释；dom就是学习...
复制链接

扫一扫