DOM知识笔记

DOM

是文档对象模型(Document object Model) 也就是document对象
其实document就是与文档相关的一些方法的集合体
DOM主要让我们获取元素创建元素元素操作更改元素的属性获取元素的属性设置元
素的文本

元素(element):文档中的都有标签都是元素,元素可以看成是对象
节点(node):文档中都有的内容都是节点:标签,属性,文本
文档(document):一个页面就是一个文档
这三者的关系是:文档包含节点,节点包含元素

节点

    是DOM中规定的一个概念。DOM规定: 整个文档由节点组成。

节点一共有12种。每一个节点都有属性nodeType 属性表示它的类型
1 元素节点
2 属性节点
3 文本节点
4 CDATA区段
5 实体应用元素
6 实体
7 表示处理指令
8 注释节点
9 最外层的Root element,包括所有其他节点
10 <!DOCTYPE…>
11 文档碎片节点
12 DTD中声明的符号节点

console. log(document.body.nodeType);
console. log( document.nodeType );

获取元素

getElementById( ); 通过id获取元素

var box = document . getElementById("box");

getElementsByTagName( ); 通过标签名获取元素

var ps = document . getElementsByTagName("p");
console.1og(ps); //(返回类数组)

getElementsByClassName( ); 通过类名获取元素

 var as = document. getElementsByClassName("a");
console. log(as);

getElementsByName( ); 可以通过name属性值获取元素单独针对表单元素的

var inputs = document. getElementsByName ("hobby");
console. log(inputs);

有两个方法可以通过选择器获取元素
document . queryselector()
document . queryselectorAll()

var p= document.querySelector("p");
 console. log(p);
 var ps= document.querySelectorAll("p");
 console. log(ps);

创建元素

document.createElement(“标签名”);

var div = document.createElement("div");
console.log(div);
创建文本

document.createTextNode(“文本”);

var text = document.createTextNode("你好");
console. log(text);
创建注释

document.createComment(“注释”);

var comment = document.createComment("我是一个注释") ;
console. log(comment);
创建文档碎片
var fragment = document.createDocumentFragment();
console. log(fragment);
游离在DOM树之外的元素,叫做孤儿元素。

获取body、head、 title、 html都可以直接从document.上获取
document . body => body
document . head => head
document.title => title文本
document . documentElement => html
快捷获取元素

console. log(document . body)
console. log( document . head)
console. log( document. title)
document.title = "写了";
console. log( document . documentElement);

元素操作

appendChild 可向节点的子节点列表的末尾添加新的子节点。
appendChild是所有元素都能够调用的方法参数是子元素

var text = document. createTextNode("你好"):
console. log(text);
//給div追加一个文本
div.appendChild(text);

insertBefore

var pOther =document . createElement("p");
pother.innerText  = "女儿";
var child2 = document. getElementById( "child2" );
//将第一个参数添加到自己的孩子中,位置在第二个参数之前
document.body.insertBefore(pother, child2);

replaceChild
将第一个参数代替第二个参数

var child = document . createElement("p");
child. innerText="3号儿子(亲生的)";
var child3 = document . getElementById('child3');
var result = document . body . replaceChild(child, child3);
copsole. log(result);

removeChild
移除子元素参数是被移除的元素

var child3 = document . getElementById("child3");
document . body . removeChild(child3);

remove

 document .body.remove();

cloneNode

var child3 = document. getElementById("child3");
var copy = child3.c loneNode(true);
console. log(copy);
document . body . appendChild(copy);

元素属性

标签属性分两种: HTML标准属性自定义属性
HTML标准属性又分两种:
通用属性(id、 class、 style、 title等每一个标签都有的属性)
非通用属性(src、href、 type、 chedked、 name、 value(input) 、action(form) 、for(lable))

统一可以操作的方式:
getAttribute、setAttribute、 removeAttribute

document.body.setAttribute("id","bodyFirst"); // 可以设置标准属性
 document.body.setAttribute("zdy", "H5First"); //可以设置自定义属性
 var a = document.body.getAttribute("erjieduan"); // 可以获取自定义属性
 var className = document.body.getAttribute("class"); // 可以获取标准属性属性

如果要获取的是标准属性可以直接打点获取或者方括号获取

console.log( document.body.className); //读取的是className

innerText和innerHTML

除了标签上的属性之外我们还可以通过元素设置内部文本设置事件更改样式

 document.body.innerText =“<p> 你好1</p>"; //<p> 你好1</p>
document.body.innerHTML = "<p> 你好2</p>"; //你好2

区别:
innerHTML:识别标签, 获取双标签内的内容, 包含内容里的嵌套标签 ;
innerText :不识别标签, 在获取标签内容时去除所有标签,就算有标签,也不会被渲染

设置样式

console. log( document.body.style.color);
console. log(document.body.style[ "background-color"]);
console. log(document.body . style.backgroundColor); // 读取带-的属性记得要转驼峰
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值